maya's blog

Jumat, 25 Maret 2011

Tugas Praktikum 6 Pemograman Web-Ratna Ayu-1072005

Pengenalan CSS

CSS adalah singkatan dari Cascading Style Sheet, berfungsi untuk meningkatkan kemampuan XHTML dan berperan dalam desain tampilan.
CSS menggunakan pasangan tag <style type="text/css"> dan </style>. Dalam tag CSS antar atribut dipisahkan tanda ; (titik koma) dan pemberian nilai atribut menggunakan tanda :(titik dua).

1. Mengatur warna teks
Pewarnaan warna teks dapat ditulis di dalam tag style, contoh sintaks :
<style type="text/css">
h1{color : red;}
p{color : blue;}
</style>
Dan dalam tag body nya :
<body>
   <h1>Berwarna merah</h1>
   <p>Berwarna Biru</p>
</body>

2. Mengatur Perataan teks
Perataan teks tersedia dalam beberapa jenis, yaitu left, right, center, dan justify.
contoh sintaks:
<style type="text/css">
h1{text-align : center;}
p{text-align : left;}
</style>

3. Membuat Garis pada teks
Untuk membuat garis pada teks, digunakan sintaks text-decoration. Jenis text-decoration adalah :
-overline
untuk garis diatas teks
-underline
untuk garis dibawah teks
-linethrough
untuk coretan tengah
-blink
untuk modifikasi garis
contoh sintaks :
<style type="text/css">
h1{text-decoration : underline;}
p{text-decoration : overline;}
</style>

4. Mengatur Indentasi teks
Dilakukan dengan mengatur nilai atribut text-indent dengan satuan cm dan px.
contoh sintaks :
<style type="text/css">
p{text-indent : 2cm;}
</style>

5. Mengatur penggunaan Huruf Kapital
Tag yang digunakan untuk mengatur huruf kapital adalah tag text-transform. Jenis-jenis text-transform:
-uppercase
untuk penggunaan huruf besar semua
-lowercase
penggunaan huruf kecil
-capitalize
penggunaan huruf kapital di setiap awal kata
contoh sintaks :
<style type="text/css">
h1{text-transform : uppercase;}
</style>

6. Mengatur Ukuran dan jenis huruf
Untuk pengaturan ukuran huruf, digunakan tag font-size, sedangkan untuk pengaturan jenis huruf yaitu tag font-family.
contoh sintaks :
<style type="text/css">
    p{font-family : arial;
        font-size : 18pt;}
</style>

7. Menagtur Cetak tebal dan Cetak miring
Untuk pengaturan cetak tebal digunakan tag font-weight, dan pengaturan cetak miring menggunakan tag font-style.
contoh sintaks :
<style type="text/css">
p{font-weight : bold;
      font-style : italic;}
</style>

8. Mengatur tipe border/garis tepi dan warna border
Jenis tag border-style:
-dotted
-dashed
-solid
-double
-groove
-ridge
-inset
-outset
Untuk pengaturan warna border digunakan tag border-color.

9. Mengatur Ketebalan border
Tag yang digunakan untuk mengatur ketebalan border adalah tag border-width.
contoh sintaks :
<style type="text/css">
   p{border-style : dotted;
       border-color : red;
       border-width : 16px;}
</style>

10. Mengatur padding dan margin
padding digunakan untuk mengatur jarak teks dan border.
contoh sintaks :
<style type="text/css">
   p{border-style : dotted;
       border-color : red;
       padding-left : 1cm;
       padding-top : 1cm;
       padding-bottom : 1.5cm;
       padding-right : 1.5cm;}
</style>
Margin diatur untuk memberi jarak antara border dengan layar.
contoh sintaks :
<style type="text/css">
   p{border-style : dotted;
       border-color : red;
       margin-left : 2cm;
       margin-right : 3cm;}
</style>

11. CSS pada UnOrdered List dan Ordered List
contoh sintaks UnOrdered list :
<style type="text/css">
   ul{list-style-type : disc}
</style>
contoh sintaks Ordered list :
<style type="text/css">
   ol{list-style-type : lower-roman}
</style>

12. Membuat list dengan gambar
contoh sintaks :
<style type="text/css">
   ul{list-style-image : url('contoh.jpg')}
</style>

13. Mengatur Warna dan Gambar Latar
contoh sintaks untuk mengatur warna latar:
<style type="text/css">
  body{background-color : blue;}
  h1{background-color : red;}
</style>
contoh sintaks untuk mengatur gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');}
</style>

14. Mengatur posisi gambar latar
contoh sintaks untuk mengatur posisi gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');
            background-repeat : norepeat;
            background-position : top-right;}
</style>

15. Mengatur Perulangan dan membekukan Gambar latar
contoh sintaks untuk mengatur perulangan gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');
            background-repeat : repeat-x;}
</style>
contoh sintaks untuk membekukan gambar latar:
<style type="text/css">
  body{background-image : url('pic1.jpg');
            background-repeat : norepeat;
            background-position : top-right;
            background-attachment : fixed;}
</style>

16. ID dalam CSS
ID digunakan untuk meningkatkan kemampuan dari CSS. Lambang ID dalam CSS adalah #.
contoh sintaks :
<style type="text/css">
  #satu{font-style : italic;
            background-color : aqua;
            color : red;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 Style 1</h1>
</body>

17. Class dalam CSS
Simbol yang digunakan oleh class adalah .(titik). Class dapat digabungkan dengan ID.
contoh sintaks :
<style type="text/css">
  #satu{font-style : italic;
            background-color : aqua;
            color : red;}
   .dua{text-decoration : underline;
           font-family : arial;
           border-style : dotted;
           border-color : blue;}
   h2.satu{font-family : arial;
               color : aqua;}
</style>
dan dalam tag body diisi :
<body>
<h1 id="satu">Header 1 ID 1</h1>
<h1 class="dua">Header 1 Class 2</h1>
  <h2 class="satu">Header 2 class 1</h2>
</body>

18. In line CSS
Pendefinisian CSS ditulis sebagai nilai dari atribut style pada tag XHTML. Ditulis dalam tag body.
contoh sintaks :
<body>
<h1 style="color : pink;
                   background-color : blue;
                   text-decoration : underline;">Menggunakan model pendefinisian In line</h1>
</body>

19. External CSS
Pendefinisian CSS ditulis dalam file yang terpisah dari dokumen XHTML. Digunakan tag <link rel="stylesheet" type="text/css" href="file1.css"> dalam tag body dokumen XHTML. Sedangkan dalam file1.css dibuat ID atau Class yang akan digunakan.

Senin, 21 Maret 2011

Tugas Praktikum 5 Pemograman Web-Ratna Ayu-1072005

Form

Form digunakan untuk menampung komponen inputan, form berkaitan dengan pemograman. Form merupakan sejenis daftar dalam suatu formulir. Di dalam form terdapat 3 atribut yaitu name, method, dan action.
Ada beberapa tipe input didalam form, yaitu :
1. Tipe Text atau TextBox
digunakan untuk memberi kotak pada data yang akan diisi.
Contoh sintaks :
<body>
<form>
Nama: <input type="text" name="nama" size="20" maxlength="15" /><br/>
Alamat:<input type="text" name="alamat" size="20" maxlength="20">
</form>
</body>
Hasil :

NAMA	:
ALAMAT	:

2. Tombol Submit dan Reset
Contoh sintaks tombol submit adalah : <input type="submit" value="kirim"/>
Contoh sintaks tombol reset adalah : <input type="reset" value="hapus"/>
Hasil :

3. Tipe Input Password
Contoh sintaks :
<body>
<form>
username<input type="text" name="username"/><br/>
password<input type="password" name="password" />
<input type="submit" value="Subnit Query">
</form>
</body>
Hasil :

Username	:
Password	:

4. Tipe CheckBox
Contoh sintaks :
<body>
<form>
Daftar hobi</br>
    <input type="checkbox" name="renang"/>renang</br>
    <input type="checkbox" name="baca" checked/>membaca</br>
    <input type="checkbox" name="mancing" checked/>memancing</br>
    <input type="checkbox" name="nonton"/>nonton</br>
  </form>
</body>
Hasil :
Daftar hobi
renang
membaca
memancing
nonton

5. Tipe RadioButton
Contoh sintaks :
<body>
  <form>
   Jenis kelamin</br>
    <input type="radio" name="kelamin" value="pria"/>Laki-laki</br>
    <input type="radio" name="kelamin" value="wanita" checked/>Perempuan</br>
  </form>
</body>
Hasil :
Jenis kelamin
Laki-laki
Perempuan

6. Tipe TextArea
Contoh sintaks :
<body>
  <form>
   Nama<input type="text" name="nama"></br>
   Komentar<textarea name="komentar" cols="20" rows="5" wrap> </textarea>
  </form>
</body>
Hasil :

Nama
Komentar

7. Tipe ComboBox
Dalam combo box, pilihan yang dapat dipilih hanya satu.
Contoh sintaks :
<body>
  <form>
  distro linux favourite:</br>
   <select name="distro">
    <option value="fedora"/>Fedora Core
    <option value="suse"/>Open Suse
    <option value="ubuntu" selected/>Ubuntu
    <option value="debian"/>Debian
   </select>
  </form>
</body>
Hasil :

8. Tipe ListBox

Dalam List box, dapat memilih lebih dari satu pilihan.
Contoh sintaks :
<body>
  <form>
   distro linux favourite:</br>
    <select name="distro" multiple/>
     <option value="fedora" selected/>Fedora Core
     <option value="suse"/>Open Suse
     <option value="ubuntu" selected/>Ubuntu
     <option value="debian"/>Debian
    </select>
  </form>
</body>
Hasil :

Senin, 14 Maret 2011

Tugas Praktikum 4 Pemograman Web-Ratna Ayu-1072005

FRAME

Frame digunakan untuk membingkai beberapa dokumen XHTML ke dalam satu tampilan halaman web.
Frame dibagi menjadi 2 frame, yaitu:
- tag <frame>
dapat dipakai sebagai tag <frame src/> yang biasanya dipergunakan untuk mengambil suatu halaman web lainnya. Contoh sintaks : <frame src="halaman_a.html"/>.
- tag <frameset>
didalam tag frameset dapat digunakan untuk membagi frame ke dalam bentuk kolom dan baris.
Contoh sintaks : <frameset cols="30%,*,*">,sintaks ini dipergunakan untuk membagi frame menjadi 3 kolom. Sedangkan sintaks : <frameset rows="30%,*,*">, dipergunakan untuk membagi frame menjadi 3 baris.
Untuk memahami frame biasanya digunakan teknik memotong roti.

Borderless Frame
digunakan untuk memberi nilai pada atribut border sesuai dengan keperluan. Atribut border diletakkan didalam tag frameset.
Contoh sintaks: <frameset cols="20%,40%,*" border="4">.
Untuk memberi nilai 0 pada atribut border, maka isi atribut border dalam tag frameset adalah 0 sehingga jika border = 0,tidak terdapat garis pemisah antar frame yang terlihat.

Link Dalam Frame
Untuk membuat link dalam frame digunakan 2 dokumen XHTML. Contoh tag yang digunakan dalam membuat link didalam link yaitu : <a href="halaman_b.html" target="kanan">Halaman b</a>.

IFrame
Merupakan implementasi frame yang lebih fleksibel. Untuk membuat iframe juga membutuhkan 2 dokumen XHTML.
Contoh sintaks : <iframe src="halaman1.html" width="200" height="200" align="right"/>.

Minggu, 06 Maret 2011

Tugas Praktikum 3 Pemograman Web-Ratna Ayu-1072005

Tabel
Table digunakan untuk membagi tampilan dan mengelompokkan suatu informasi.
Terdapat beberapa tag didalam tag tabel, yaitu :
- <caption>
Tag untuk memberi judul pada tabel yang ingin dibuat.
- <tr>
Tag ini digunakan untuk membuat suatu baris pada tabel.
- <th>
Digunakan untuk menyatakan cell heading suatu tabel.
- <td>
Digunakan untuk membuat isi dari suatu cell data dalam tabel.
Dalam Tabel, terdapat beberapa atribut yang mendukung pembuatan tabel yang lengkap dan efisien.
Salah satunya yaitu atribut border, atribut ini digunakan umtuk mengatur ketebalan garis tepi. Garis tepi dapat diatur sesuai keinginan.
Atribut bgcolor digunakan untuk mengatur warna latar pada keseluruhan tabel.
Contoh penggunaan atribut border dan bgcolor pada tag table yaitu : <table bgcolor="red" border="3"> </table>.
Atribut yang digunakan untuk mengatur jarak spasi dan padding adalah atribut cellspacing dan cellpadding. Cellspacing digunakan untuk mengatur jarak antar cell. Sedangkan cellpadding digunakan untuk mengatur jarak tulisan dan border di masing-masing cell.
Contoh penggunaan atribut cellspacing dan cellpadding adalah : <table cellpadding="10" cellspacing="30"> </table>.
Penggunaan headings pada table, yaitu :
<html>
<body>
    <table border="2">
      <tr>
        <th>heading</th>
      </tr>
      <tr>
        <td>baris 1, kolom 1</td>
        <td>baris 1, kolom 2</td>
      </tr>
    </table>
</body>
</html>
Atribut width dan height digunakan untuk mengatur lebar dan tinggi tabel.
Contoh penggunaan dalam tag : <table width="400" height="400"> </table>.
Atribut align dan valign juga dapat digunakan didalam tag table. Atribut align digunakan untuk melakukan perataan secara horisontal. Dapat digunakan didalam tag table dan tag td. Contoh : <table align="center"> <tr> <td align="left">Perataan</td> <td>Kiri</td> </tr> </table>.
Sedangkan atribut valign digunakan untuk melakukan perataan secara vertikal. Biasanya digunakan didalam tag td. Contoh : <tr> <td valign="top">Perataan</td> <td>atas</td> </tr>.
Atribut colspan dan rowspan. Atribut colspan digunakan untuk penggabungan cell secara kolom, sedangkan atribut rowspan untuk penggabungan cell secara baris. Kedua atribut ini diletakkan didalam tag yang ingin digabungkan. Contoh sintaks : <th rowspan="3" colspan="2">3 baris dan 2 kolom digabungkan</th>.
Mengosongkan cell pada table digunakan tag td, contoh sintaks : <td> </td>.

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 . Komentar tidak akan muncul di layar browser, dan terdapat didalam tag <body>. Contoh sintaks :

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 :

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>