Oleh : Eko Prianto. Read Carefully  another section at the same document  to a different document  to a different Web page  to a variety of other.

Presentasi berjudul: "Oleh : Eko Prianto. Read Carefully  another section at the same document  to a different document  to a different Web page  to a variety of other."— Transcript presentasi:

1 Oleh : Eko Prianto

2 Read Carefully

3  another section at the same document  to a different document  to a different Web page  to a variety of other Web objects

4  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.

5 5 In this structure you can jump only from one page to the next or previous page Link to previous page Link to next page 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.

6 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 second link jumps back to beginning third page has three links third link jumps to next page

7 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.

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

9 9 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.

10 links to the conttxt.htm document, which contains contact information links to the linktxt.htm document, which contains links to various Chemistry Web sites. 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. the chem.htm document, which is the document containing the links.

11  Buat sebuah halaman web dengan menggunakan notepad dengan kode sebagai berikut : My first website Home - Profile - Contact Us - Artikel - Gallery ini halaman home Ini adalah halaman utama

12  Save As…. data tersebut dengan nama “index.html”  Jalankan index.html menggunakan browser Mozilla Firefox(klik 2x 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.

13  Buat sebuah halaman web dengan yang lain menggunakan notepad dengan kode sebagai berikut (simpan dengan nama “profile.html”): My first website Home - Profile - Contact Us - Artikel - Gallery ini halaman profile Di halaman ini akan menampilkan Data diri saya

14  Buat sebuah halaman web dengan yang lain menggunakan notepad dengan kode sebagai berikut (simpan dengan nama “contact us.html”): My first website Home - Profile - Contact Us - Artikel - Gallery ini halaman Contact Us Apabila anda berminat, silahkan menghubungi :

15  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 :

16  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.

17  Buka halaman contact us.html.  Tambahkan kode sebagai berikut : … ini halaman Contact Us Apabila anda berminat, silahkan menghubungi : No Telp : 08156988… Atau kunjungi website produk kami di : http://www.produkkami.com

18  Kemudian jalankan “contact us.html”  Klik pada link www.produkkami.com  Apakah link ke www.produkkami.com telah bekerja ?www.produkkami.com

19  Buka halaman contact us.  Tambahkan kode sebagai berikut : … ini halaman Contact Us Apabila anda berminat, silahkan menghubungi : No Telp : 08156988… Atau kunjungi website produk kami di : http://www.produkkami.com Atau kirim ke e-mail eko.teladan@gmail.com

20  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.

21  Copy data “lat4.txt“ yang ada di dalam folder yang sama dengan folder power point presentasi ini.  Buka menggunakan Notepad.  Simpan file tersebut dengan nama “lat4.html”  Jalankan file “lat4.html” seperti gambar di bawah ini :

22  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 :

23  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.

24 “End of Presentation” Semoga Bermanfaat