Membuat Link Oleh Eko Prianto Attention Read Carefully

Membuat Link Oleh : Eko Prianto

Attention Read Carefully

A kind of HTML Link : another section at the same document to a different Web page to a variety of other Web objects

Web Page Structures � Storyboarding your Web pages before you create links helps you determine which structure works best for the type of information you’re presenting. � You want to ensure that readers can navigate easily from page to page without getting lost. � You’ll encounter several Web structures as you navigate the Web. � Examining some of these structures can help you decide how to design your own system of Web pages.

Linear Structures This figure shows one common Web page structure, the linear structure, in which each page is linked to the next and to previous page, in an ordered chain of pages. Link to previous page In this structure you can jump only from one page to the next or previous page Link to next page 5

Augmented Linear Structure This figure shows an augmented linear structure, in which you include a link in each page that jumps directly back to the first page, while keeping the links that allow you to move to the next and previous pages. first link jumps to previous page third page has three links second link jumps back to beginning third link jumps to next page

Hierarchical Structure This figure shows the hierarchical structure, which starts with a general topic that includes links to more specific topics. Each specific topic includes links to yet more specialized topics, and so on. In a hierarchical structure, users can move easily from general to specific and back, but not from specific to specific.

Combination of Linear and Hierarchical Structures overall structure is hierarchical This figure shows a hierarchical structure in which each level of pages is related in a linear structure. information about the play informatio n about the acts each level is linear the scenes 8

Multipage Document with No Coherent Structure This structure is confusing, and it makes it difficult for readers to grasp the contents of the overall Web site. Moreover, a user who enters this structure at a certain page might not be aware of the presence of the other pages. 9

Creating Links Among Documents Unlike creating hypertext links between elements on the same page, this process does not require you to set an anchor in a file to link to it; the filename serves as the anchor or destination point. links to the conttxt. htm document, which contains contact information the chem. htm document, which is the document containing the links to the linktxt. htm document, which contains links to various Chemistry Web sites.

Bagian 1 : Link to different page � Buat sebuah halaman web dengan menggunakan notepad dengan kode sebagai berikut : <html> <head> <title>My first website</title> </head> <body bgcolor="yellow"> <a href="index. html" target="showframe">Home</a><a href="profile. html" target="showframe">Profile</a><a href="contact us. html" target="showframe">Contact Us</a><a href="artikel. html" target="showframe">Artikel</a><a href="gallery. html" target="showframe">Gallery</a> <h 2>ini halaman home</h 2> Ini adalah halaman utama </body> </html>

Bagian 1 : Link to different page � Save As…. data tersebut dengan nama “index. html” � Jalankan index. html menggunakan browser Mozilla Firefox(klik 2 x pada file index. html). � Klik pada link yang tertera di halaman web (misal : Profile), apakah akan langsung terbuka halaman profile ? Tentu tidak, karena kita belum membuat halaman profile. html sehingga link tersebut tidak menemukan halaman profile. html yang ada pada folder yang sama dengan index. html.

Bagian 1 : Link to different page � Buat sebuah halaman web dengan yang lain menggunakan notepad dengan kode sebagai berikut (simpan dengan nama “profile. html”): <html> <head> <title>My first website</title> </head> <body bgcolor="yellow"> <a href="index. html" target="showframe">Home</a><a href="profile. html" target="showframe">Profile</a><a href="contact us. html" target="showframe">Contact Us</a><a href="artikel. html" target="showframe">Artikel</a><a href="gallery. html" target="showframe">Gallery</a> <h 2>ini halaman profile</h 2> Di halaman ini akan menampilkan Data diri saya </body> </html>

Bagian 1 : Link to different page � Buat sebuah halaman web dengan yang lain menggunakan notepad dengan kode sebagai berikut (simpan dengan nama “contact us. html”): <html> <head> <title>My first website</title> </head> <body bgcolor="yellow"> <a href="index. html" target="showframe">Home</a><a href="profile. html" target="showframe">Profile</a><a href="contact us. html" target="showframe">Contact Us</a><a href="artikel. html" target="showframe">Artikel</a><a href="gallery. html" target="showframe">Gallery</a> <h 2>ini halaman Contact Us</h 2> Apabila anda berminat, silahkan menghubungi : </body> </html>

Bagian 1 : Link to different page � Buat untuk semua halaman : index. html, profile. html, contact us. html, artikel. html dan gallery. html di dalam sebuah folder yang sama. Sehingga folder tempat anda menyimpan berisi file seperti tampilan berikut ini :

Bagian 1 : Link to different page �Jalankan index. html, apakah semua halaman sudah bisa dibuka/ link yang anda buat berfungsi ? �Sebagai catatan : nama link yang kita tuliskan di notepad harus sama dengan nama file yang kita buat (contoh : kita telah membuat link ke profile. html, maka kita juga harus menamai halaman profile dengan profile. html.

Bagian 2 : Link to different web page �Buka halaman contact us. html. �Tambahkan kode sebagai berikut : … … <h 2>ini halaman Contact Us</h 2> Apabila anda berminat, silahkan menghubungi : No Telp : 08156988… Atau kunjungi website produk kami di : <a href=“http: //www. produkkami. com” target=“new_window”> http: //www. produkkami. com</a> </body> </html>

Bagian 2 : Link to different web page �Kemudian jalankan “contact us. html” �Klik pada link www. produkkami. com �Apakah link ke www. produkkami. com telah bekerja ?

Bagian 3 : Link to variety of other Web objects �Buka halaman contact us. �Tambahkan kode sebagai berikut : … … <h 2>ini halaman Contact Us</h 2> Apabila anda berminat, silahkan menghubungi : No Telp : 08156988… Atau kunjungi website produk kami di : <a href=“http: //www. produkkami. com” target=“new_window”> http: //www. produkkami. com</a> Atau kirim ke e-mail <a href=mailto: eko. teladan@gmail. com>eko. teladan@gmail. com </a> </body> </html>

Bagian 3 : Link to variety of other Web objects �Maka apabila halaman contact us. html dijalankan, akan tampil link ke eko. teladan@gmail. com yang kalau kita klik akan membuka aplikasi MS Outlook yang akan mengirimkan e-mail ke alamat tersebut.

Bagian 4 : Link to another section at the same document � Copy data “lat 4. txt“ yang ada di dalam folder yang sama dengan folder power point presentasi ini. � Buka menggunakan Notepad. � Simpan file tersebut dengan nama “lat 4. html” � Jalankan file “lat 4. html” seperti gambar di bawah ini :

Bagian 4 : Link to another section at the same document �Di bawah teks “Daftar Isi” terdapat sebuah link “seiketsu” yang kalau anda klik akan menuju pada bagian Seiketsu yang ada pada halaman tersebut. �Hal ini karena kita telah membuat “tanda” atau “anchor” di bagian bawah seperti kode sebagai berikut :

Bagian 4 : Link to another section at the same document �Link yang ada di bawah teks “Daftar isi” yang berisi kode sebagai berikut : akan menuju pada teks yang telah kita beri “anchor” tadi sehingga kita dapat melakukan link di dalam sebuah halaman web dengan menggunakan kode tersebut.

Penutup “End of Presentation” Semoga Bermanfaat