Sebenarnya banyak sekali kode yang dipakai webdesainer. Paling tidak ada 6 cara yang banyak dipilih untuk menambahkan fungsi include ke dalam kode HTML.

Keenam kode ini menggunakan bahasa pemrograman sebagai berikut:

PHP – menggunakan php, phtml, atau phtm (server side)
JavaScript – menggunakan html atau htm (client side)
SSI – menggunakan ekstensi Server Side (shtml atau shtm)
ASP – menggunakan ekstensi asp (server side)
Ajax – Untuk keterangan lebih lanjut tentang Skrip Include dalam Ajax, temukan di sini.
Frames – Tutorial Frame dapat Anda temukan di sini.

Kode-kode berikut ini tergantung pada fasilitas server dan bagaimana setting server yang Anda gunakan.
Berikut ini basis perintah untuk menambahkan fungsi Include yang saya maksud:

SSI
Kode:
<!–#include file=”includes/menu.html” –>

ASP
Kode:
<!–#include file=”includes/menu.html” –>

PHP
Kode:
<?php include(“includes/menu.html”); ?>

JavaScript
Kode:
<script src=”includes/menu.js”></script>

(Jika anda menggunakan Javascript, mungkin beberapa Search Engine (Mesin Pencari) tidak akan bisa membacanya fungsi Include. Oleh karenanya saya tidak merekomendasikan tipe ini. Gunakan hanya jika Server Anda mendukung SSI, ASP, PHP dan atau Anda memerlukannya untuk mempertahankan ekstensi html file-file Anda.

Dengan model server side sebuah file akan diuraikan di server sebelum direder dalam browser. File menu.html hanya akan berisi kode navigasi Anda, misalnya seperti ini

Kode:

| <a href=”/beranda.asp”>Beranda</a> | <a href=”/tentang.asp”>Tentang Kamit</a> | <a href=”/kontak.asp”>Informasi Kontak</a> |

Dan hanya itu, tidak ada kode lain yang diperlukan karena bagian yang lain akan dipanggil dari halaman utama dengan menggunakan fungsi include.

Jika Anda menggunakan JavaScript akan sedikit berbeda caranya. Anda perlu menyimpan file ini sebagai menu.js:
Kode:

<!–
document.writeln(“| <a href=\”/beranda.asp\”>Beranda</a> | <a href=\”/tentang.asp\”>Tentang</a> | <a href=\”/kontak.asp\”>Informasi Kontak</a> |”);
//–>

dan kemudian panggil skrip tersebut ke dalam sebuah halaman dengan kode sebagai berikut:

Kode:
<script src=”includes/menu.js”></script>

Namun demikian, beberapa mesin pencari tidak bisa membaca Javascrip karena ini dianggap sebagai bahasa client side. Jika User menonaktifkan fungsi Javascript-nya, maka ia tidak akan melihat fungsi JavaScript.

Jika Anda menggunakan fungsi Include model server side, Saya merekomendasikan Anda untuk menggunakan link Virtual. Untuk mengetahui lebih detail tentang beberapa tipe hyperlink klik disini.

Jangan lupa periksa kembali fungsi Include mana saja yang didukung oleh hosting yang Anda gunakan saat ini.

terakhir, untuk ASP.NET (ASPX)
Kodenya:

<%
Response.WriteFile (“FileAnda.inc”)
%>

Anda lebih suka yang mana?

Itu tadi permasalahan yang pernah saya alami saat meng-online-kan konten halaman web HTML karya bareng rekan-rekan ini. Setelah konsultasi dan baca-baca beberapa artikel, saya temukan dua cara sederhana. Jika Anda punya masalah yang sama, silakan ikuti langkahnya berikut:

1. Dengan memanipulasi halaman web.

Salah satu forum menyarankan untuk menambahkan baris perintah berikut:

<frameset rows=”*,400,*” frameborder=”NO” border=”0″ framespacing=”0″>
<frame src=”banner.htm” name=”topFrame” scrolling=”NO” noresize >
<frameset cols=”*,700,*” frameborder=”NO” border=”0″ framespacing=”0″>
<frame src=”menu.htm” name=”leftFrame” scrolling=”NO” noresize>
<frame src=”about: blank” name=”mainFrame”>
<frame src=”beranda.htm” name=”rightFrame” scrolling=”NO” noresize>
</frameset>
<frame src=”footer.htm” name=”bottomFrame” scrolling=”NO” noresize>
</frameset>

Keterangan:
mainFrame adalah frame yang berada di tengah. Di sinilah konten utama web saya.
topFrame dan bottomFrame berada di posisi paling atas dan paling bawah web.
leftFrame dan rightFrame bertugas mengetengahkan posisi mainFrame dari kedua sisi.

Pada contoh di atas, Anda perhatikan bahwa semua file source/rujukan untuk tiap frame berupa blank.htm kecuali frame utama yang berisi konten sebenarnya.

mainFrame sendiri berupa halaman kosong. Anda dapat memanggil file tersendiri atau menempatkan iframe di sana. Jika Anda memilih cara ini berarti anda akan memposisikan iframe dalam frameset yang telah kita manipulasi.

2. Dengan Menggunakan IFrame.

Sebenarnya fungsi MainArea dalam Frameset adalah untuk menampilkan konten IFRAMES. Namun saya ingin keseluruhan Frameset terletak pas di tengah, bukan hanya konten utamanya saja. Frameset saya berisi tiga halaman yakni; Area Banner-Atas, area Navigasi Kiri, dan Area Target Utama. Banner Atas dan Navigasi kiri merupakan konten statis, hanya dipanggil sekali dan selanjutnya hanya konten Target Utama yang berubah sesuai dengan navigasi yang dipilih.

Untuk mengetengahkan seluruh Frameset, buatlah index.htm dan sisipkan baris perintah berikut ini diantara kode <body> dan </body>.

<div style=”text-align:center; display:block”>
<iframe src=”http://www.websiteanda.com” width=”1024px” height=”768px”></iframe>
</div>

Masukkan alamat URL Anda pada www.websiteanda.com. Atau jika Anda lebih suka, Anda dapat mengganti URL Iframe tersebut dengan halaman index frameset Anda. Sehingga kurang lebih tampilan hirarkinya akan tampak seperti berikut:

index.htm –> index2.htm (frameset) –> banner.htm, menu.htm, beranda.htm (file konten frameset)

Saya memilih dan merekomendasikan cara ini karena lebih mudah dan halaman web tampil dengan rata tengah persis seperti yang saya inginkan.

Silakan periksa sendiri hasilnya di sini.
Bagaimana dengan karya Anda?

Tulisan ini dikembangkan dari sini dan tutorial ini.

Tiga jenis link yang saya maksud adalah:

RELATIF:
Kode:
<a href=”../default.asp”>Home</a>

ABSOLUT:
Kode:
<a href=”http://www.domainmu.com/default.asp”>Home</a>

VIRTUAL:
Kode:
<a href=”/default.asp”>Home</a>

Masing-masing dari ketiga tipe link di atas memiliki kelebihan tersendiri. Link Relatif sangat tergantung pada path/lokasi file dimana dia ditempatkan. Misalnya dalam contoh di atas, Home akan berada di luar folder root website dan dengan mengklik link tersebut, Anda akan diarahkan satu tingkat ke atas menuju halaman depan/Home. Jika Anda menggunakan tipe link ini dan salah menempatkan, Anda akan menemukan kode Error 404 alias halaman tidak ditemukan

Link Absolut tidak terhubung dengan path/lokasi file dimana dia baerada. Link ini akan mengunci lokasi tujuan pada URL tertentu. Oleh karena itu link ini bebas dipakai dan ditempatkan di halaman manapun asal merujuk ke halaman yang valid. Misalnya, dengan mengklik contoh link di atas akan membawa Anda ke halaman Home website www.domainmu.com.

Link Virtual mirip sekali dengan Link Relatif dari segi ketergantungan pada path file. Dengan menambahkan tanda ‘/’ seperti dalam contoh di atas, Anda akan dibawa kembali ke root folder website. Dimanapun link ini ditempatkan dalam website, ia tetap akan dapat mengarahkan Anda ke halaman depan web Anda terlepas dari lokasi link tersebut ditempatkan.

Sekarang Anda sudah bisa tentukan, link jenis apa yang akan Anda pakai untuk web Anda, kan?

Tulisan ini dikembangkan dari sini