Pengantar Desain Web

Tutorial ini cocok untuk pemula di bidang desain web. Ini mencakup:

Pendahuluan - Anda di sini. HTML - Sebuah pengantar bahasa komputer yang membentuk jantung dari halaman web. Meskipun tidak mutlak diperlukan untuk mengetahui hal ini, Anda masih harus membaca halaman ini untuk mendapatkan gambaran bagaimana kerjanya. Editor - Alat dapat Anda gunakan untuk membantu membuat website. Hosting - Bagaimana menemukan rumah (host server) untuk website Anda. Publish! - Cara meng-upload situs Anda ke internet sehingga orang lain bisa mengunjunginya.

Catatan Penting: Sebelum mengambil tutorial ini atau mencoba untuk membangun sebuah website, Anda harus memiliki pemahaman dasar tentang infrastruktur yang membentuk internet. Anda perlu tahu apa server adalah, bagaimana website ada dan bagaimana orang mengaksesnya. Jika Anda tidak memahami hal ini, Anda tidak harus mulai membangun situs Anda! Sebaliknya Anda harus mengambil WWW singkat kami Primer yang menjelaskan itu bagus dan sederhana. Kemudian kembali ke sini dan melakukan ...The Biaya Membuat Website

Pada titik ini, banyak orang akan bertanya-tanya satu hal: Apa yang akan ini biaya? Kabar baiknya adalah bahwa, selain dari biaya normal koneksi internet, adalah mungkin untuk membangun dan mengoperasikan situs web di benar-benar tanpa biaya. Kabar buruknya adalah bahwa hal itu sulit untuk bekerja seperti ini dan ada keterbatasan untuk apa yang dapat Anda lakukan tanpa mengeluarkan uang. Tutorial ini akan menawarkan pilihan untuk tingkat anggaran berbagai serta mereka tanpa anggaran sama sekali.Metodologi

Sebelum kita turun ke bisnis kita harus menunjukkan bahwa ada dua cara yang

sangat berbeda untuk membuat sebuah website.

Cara tercepat dan termudah untuk membuat sebuah situs adalah dengan menggunakan on-line "penyihir" diberikan oleh penyedia layanan internet (ISP) atau organisasi lainnya. Untuk menggunakan metode ini, kunjungi alamat internet yang diberikan kepada Anda oleh organisasi yang menyediakan layanan. Di sana Anda akan dipandu melalui serangkaian langkah-langkah sederhana yang akan menghasilkan situs yang dibangun untuk Anda. Keuntungan dari metode ini adalah bahwa Anda tidak perlu keahlian lain selain menggunakan browser Anda. Kekurangannya adalah bahwa Anda sangat terbatas dalam apa yang dapat Anda lakukan dengan jenis situs. Pendekatan lain adalah untuk membangun sebuah situs web pada komputer Anda sendiri, kemudian "upload" ke internet sehingga orang lain dapat mengaksesnya. Ini adalah cara situs paling serius dibuat, dan itu adalah metode yang tutorial ini akan menutupi.

Catatan: Karena internet adalah suatu lingkungan yang rumit, tutorial ini pengantar cenderung over-menyederhanakan penjelasan tentang bagaimana segala sesuatu bekerja. Anda tidak harus mengambil semua contoh dan ilustrasi terlalu harfiah, tetapi informasi secara konseptual suara. Dalam waktu, Anda dapat memilih untuk membuat usaha dan membangun pemahaman yang lebih akurat secara teknis.Memulai

Itu semua bisa terlihat sangat menakutkan bagi pemula, tetapi jika Anda tahu bagaimana untuk berselancar internet dan menggunakan pengolah kata maka Anda seharusnya tidak memiliki kesulitan membuat website.

Namun, kesalahan tunggal terbesar yang kami lihat dari pemula sedang mencoba untuk melakukan terlalu banyak terlalu cepat. Apapun tingkat pengalaman dengan komputer dan internet, itu benar-benar penting bahwa Anda mengambil hal-hal yang perlahan-lahan dan tidak mendapatkan depan diri sendiri.

Pembangunan website adalah ladang ranjau. Jika Anda memiliki peta Anda akan baik-baik saja, tetapi jika Anda pikir itu terlihat mudah dan pergi pengisian di Anda akan berakhir datang terpisah!

Banyak aplikasi perangkat lunak akan memberitahu Anda bahwa desain web mudah. Itu umum untuk melihat klaim seperti "Membuat website Anda sendiri dalam hitungan menit - tidak ada pengalaman yang diperlukan". Dalam pendapat kami klaim ini menyesatkan - Anda hanya tidak bisa belajar cukup dalam beberapa menit untuk memiliki kesempatan untuk sukses. Anda dapat mempelajari dasar-dasar dalam satu jam atau lebih, tetapi Anda akan membutuhkan jauh lebih lama jika Anda ingin menjadi apapun yang baik.

Orang sering meminta kami untuk merekomendasikan sebuah program komputer yang akan memungkinkan mereka untuk membuat website yang fantastis. Mereka kadang-kadang menunjukkan kepada kita sebuah website yang mereka sukai dan berkata "Saya ingin sebuah program yang akan membuat situs seperti ini." Skenario ini agak seperti mengambil foto dari rumah ke toko hardware dan berkata "Saya ingin palu yang akan membuat rumah seperti ini".

Jadi, inilah realitas pertama: Tidak ada hal seperti program yang membuat situs yang baik. Meskipun beberapa program yang lebih bermanfaat daripada yang lain, pada akhirnya itu terserah Anda. Website yang baik tidak mengesankan karena mereka dibuat dengan program yang baik, mereka mengesankan karena mereka dibuat oleh orang yang berpengalaman. Untuk membuat situs besar Anda perlu melakukan banyak belajar. Tidak ada jalan pintas.

Penngertian HTMLDi jantung desain halaman web adalah bahasa komputer yang disebut "HTML". Meskipun bahasa baru dan teknologi yang menggantikan HTML, masih membentuk dasar dari hampir semua situs web. Untuk tutorial ini kita akan menyederhanakan situasi dan berpura-pura bahwa semua halaman web hanya menggunakan HTML.

Ini adalah di mana Anda mungkin berpikir "Oh tidak, mereka tidak mengharapkan saya untuk belajar tentang hal ini mereka?".Nah, ya dan tidak. Anda tidak benar-benar perlu tahu apa-apa tentang HTML dan jika ambisi Anda tidak tinggi maka Anda bisa pergi tanpa itu. Namun, jika Anda bahkan sedikit serius tentang membuat website yang baik maka akan banyak membantu Anda jika Anda memahami beberapa dasar-dasar. Jangan menunda - itu tidak menakutkan seperti kedengarannya.

Jika Anda benar-benar tidak bisa diganggu, ada pilihan lain yang tersedia (dengan biaya - lebih pada nanti).Dokumen HTML

Sebuah halaman web adalah sebuah "HTML Document". Ini adalah format file yang biasanya menggunakan ekstensi ". Html" atau "htm.". Misalnya, jika Anda menggunakan Microsoft Word, Anda biasanya akan menyimpan file Anda dengan ekstensi "doc.". Namun Anda juga dapat menyimpan file Anda dengan ekstensi lainnya seperti "txt.", ". Wps" dll Di antara pilihan adalah "html.".

Dokumen HTML sebenarnya hanya teks biasa, tetapi berisi potongan kode yang membawa informasi penting tentang bagaimana halaman harus ditampilkan. Anda dapat membuat suatu dokumen menggunakan editor teks apapun - bahkan yang sangat sederhana seperti Windows Notepad. Bahkan banyak web designer lebih suka menggunakan editor teks sederhana.

Inilah sebuah dokumen HTML yang sangat sederhana seperti:

<html><head><title> Sebuah Halaman Web Sederhana </ title></ Head><body>Ini adalah tentang yang sederhana seperti halaman web bisa mendapatkan.</ Body></ Html>

Untuk melihat dokumen HTML, Anda harus menggunakan browser (atau software yang serupa). Browser akan terbuka dokumen HTML di latar belakang dan "decode" sebelum menunjukkan kepada Anda. Apa yang Anda lihat adalah interpretasi browser Anda bagaimana halaman web harus melihat (catatan: ini sebenarnya merupakan titik penting - itu sebabnya Anda harus menguji situs Anda menggunakan berbagai browser). Untuk melihat apa dokumen contoh di atas terlihat seperti, klik di sini, kemudian klik tombol back browser anda untuk kembali dan melanjutkan.

Kami tidak akan pergi ke detail lagi saat ini, tapi pada akhir tutorial ini kita akan menunjukkan kepada Anda bagaimana untuk mempelajari lebih lanjut tentang HTML.

Pindah ke

Langkah 3: Editor

Langkah 3: Editor WYSIWYG

WYSIWYG berarti "Apa yang Anda Lihat adalah Apa yang Anda Dapatkan". WYSIWYG halaman web editor yang mirip dengan pengolah kata dan mereka memungkinkan Anda untuk membangun sebuah halaman web tanpa

menggunakan petunjuk HTML. Anda cukup mengetikkan teks, menambahkan gambar, dll, dengan menggunakan toolbar akrab dan menu. Editor membuat kode HTML di latar belakang.

Dreamweaver screenshotSome terkenal WYSIWYG halaman web editor:

Adobe Dreamweaver Microsoft FrontPage Microsoft Publisher

Screenshot di sebelah kanan adalah dari Dreamweaver. Menggunakan alat yang disediakan, Anda dapat menambahkan teks, gambar dan elemen lainnya langsung ke halaman.

Editor ini memiliki keunggulan yang jelas seperti kecepatan dan kemudahan penggunaan. Namun, ada trade-off: Mereka tidak 100% dapat diandalkan. Jika Anda memeriksa kode HTML, Anda akan menemukan kesalahan dan kode tambahan yang tidak diinginkan. Mereka juga cenderung menipu - Anda mungkin berpikir Anda sedang memproduksi sebuah halaman yang fantastis, tetapi menemukan bahwa itu terlihat sangat berbeda setelah Anda mempublikasikannya. Ingat bahwa editor biasanya menggunakan perkiraan bagaimana halaman akan terlihat. Untuk melihat halaman Anda sebagai itu benar-benar Anda butuhkan untuk melihatnya dalam browser.

Untuk ini (dan lainnya) alasan, beberapa desainer web profesional menolak untuk menggunakan editor WYSIWYG. Sebaliknya, mereka menggunakan editor teks sederhana dan menyusun semua HTML secara manual. Namun, itu menjadi lebih umum untuk menggunakan campuran dari kedua metode. Sebuah editor WYSIWYG yang baik akan memberikan Anda pilihan untuk mengedit kode HTML secara manual. Pada bagian bawah screenshot Dreamweaver ada panel yang menunjukkan kode HTML untuk halaman yang sedang dikerjakan. Saat Anda mengedit halaman dalam modus WYSIWYG, HTML secara otomatis update. Demikian pula, Anda dapat mengedit kode HTML dan tampilan WYSIWYG akan

diperbarui.Rekomendasi

Menemukan perangkat lunak yang tepat tidak mudah. Jika mungkin Anda harus mencoba beberapa pilihan yang berbeda - editor yang paling baik memiliki versi percobaan gratis yang tersedia. Berikut adalah apa yang kita pikirkan tentang pesaing terkemuka beberapa:

Adobe Dreamweaver adalah alat kami pilihan. Hal ini secara luas dianggap paling terbaik sama dalam bidang desain web profesional. Hal ini juga sangat cocok untuk pemula. Itu tidak murah! Adobe Kontribusi adalah saudara yang lebih rendah-biaya Dreamweaver. Hal ini memungkinkan Anda untuk menjaga dan memperbarui website Anda serta berkolaborasi dengan orang lain yang bekerja dengan Anda. Microsoft Frontpage adalah program yang bagus untuk pemula, tetapi memperingatkan: Program ini memiliki berbagai macam kekurangan dan tidak memiliki reputasi baik di kalangan profesional. Meskipun web spesialis program pengembangan dan jauh lebih murah daripada banyak pesaing itu, ada program gratis yang tersedia yang menawarkan dasarnya fungsi yang sama tanpa kerepotan. Ironisnya kita menggunakan Frontpage cukup banyak, karena orang sering mengirimkan file Frontpage untuk bekerja pada (salah satu kelemahan - Frontpage website sering tidak dapat diedit dengan program lain). Percayalah ketika kita mengatakan Frontpage menyebabkan jauh lebih banyak daripada adil itu kesedihan. Microsoft Publisher awalnya dirancang untuk media cetak, tetapi telah berkembang untuk memasukkan desain web. Ini memiliki keuntungan menjadi relatif murah, serbaguna dan akrab. Banyak orang menggunakannya hanya karena mereka sudah memilikinya diinstal. Namun itu bukan spesialis HTML editor dan tidak melakukan dengan baik. Kami tidak merekomendasikan hal ini. Microsoft Word adalah sama dengan Penerbit dalam hal itu tidak pernah awalnya dirancang untuk bekerja internet. Meskipun dapat membaca dan mengedit dokumen HTML, ia melakukannya dengan sangat buruk memang. Jika

memungkinkan, hindari seperti wabah. Ada banyak editor HTML gratis yang tersedia. Mencari di internet, kunjungi newsgroup web desain dan menghabiskan beberapa waktu memutuskan.

Berjalan terus

ke Langkah 4: Hosting

Langkah 4: Hosting

Setelah Anda membuat situs web Anda dan Anda dapat melihat bahwa ia bekerja dengan baik pada komputer Anda, Anda perlu untuk "menerbitkan" ke internet sehingga orang lain dapat melihatnya. Pada dasarnya Anda hanya perlu menyalin halaman web dari komputer Anda ke server host Anda.

Tentu, hal pertama yang Anda harus lakukan adalah untuk menemukan server host. Ada banyak pilihan yang tersedia dan menemukan solusi yang tepat tidak selalu mudah. Ada dua kategori utama dari pilihan hosting: Gratis dan Dibayar.Gratis host Server

Ada banyak tempat di internet yang akan meng-host situs Anda secara gratis. Tidak mengherankan, ada tangkapan. Ini mungkin termasuk:

Iklan banner. Kebanyakan layanan gratis membuat uang mereka dengan memasukkan iklan ke dalam halaman Anda. Iklan juga dapat muncul dalam jendela pop-up yang mengaktifkan setiap kali seseorang mengunjungi situs Anda. Tidak ada hosting domain dan URL jelek. Hosting gratis biasanya tidak memungkinkan Anda untuk menggunakan nama domain (misalnya www.myname.com). Anda malah akan diberi alamat yang bisa sangat panjang dan sulit untuk diingat. Tidak ada dukungan. Jika ada yang tidak beres atau jika Anda membutuhkan bantuan, jangan menahan nafas. Kemungkinan tidak ada yang peduli. Fitur yang terbatas. Anda akan menemukan bahwa beberapa fitur tertentu

tidak diperbolehkan. Tidak ada jaminan pelayanan. Dari waktu ke waktu host gratis hanya ditutup, baik sementara atau permenantly. Lebih sering, fitur tertentu yang mereka tawarkan dihentikan atau mereka mulai pengisian untuk mereka.

Anda bertaruh terbaik adalah untuk melihat apa yang Anda ISP ditawarkan. Kebanyakan ISP memiliki semacam pilihan web hosting gratis dengan dial-up account mereka.Dibayar host Server

Jika layanan gratis tidak memenuhi kebutuhan Anda, maka Anda akan mencari layanan hosting profesional. Harga dan fitur bervariasi widly jadi toko sekitar. Perhatikan bahwa Anda tidak harus menggunakan host yang secara geografis dekat Anda - Anda dapat memiliki situs Anda host di sisi lain dunia.

Carilah fitur berikut:

Akses FTP. Ini adalah metode yang paling umum dari penerbitan file Anda ke server host dan ditawarkan pada hampir semua pilihan hosting yang serius. Pastikan Anda tahu persis bagaimana untuk mengakses host Anda. Dukungan Teknis. Ini adalah yang paling penting - apakah penyedia menawarkan bantuan Anda menginstal dan menjalankan situs Anda? Apakah biaya tambahan ini? E-Mail. Persis apa yang e-mail fasilitas termasuk? Dapatkah Anda memiliki beberapa alamat email? Statistik. Sebagian besar host menyediakan statistik gratis untuk melihat berapa banyak orang yang mengunjungi situs Anda. CGI, PHP, dll Ini adalah fitur canggih yang memungkinkan Anda untuk menambahkan lonceng dan peluit seperti bentuk, konten dinamis, forum diskusi, dll Bukan untuk pemula, tapi tidak begitu rumit sehingga Anda tidak bisa belajar. Banyak host memiliki siap pakai fitur CGI yang dapat Anda tambahkan ke situs Anda dengan sedikit rewel, atau mereka mungkin dapat menambahkannya untuk Anda.

Frontpage Extensions. Jika Anda bersikeras menggunakan Microsoft Frontpage, maka Anda akan membutuhkan ekstensi Frontpage. Ini adalah satu set file dan protokol yang memungkinkan pemula untuk menggunakan fitur-fitur canggih simliar dengan yang ditawarkan oleh CGI. Ketika digunakan sangat hati-hati mereka bisa menjadi alat yang berguna. Namun, ekstensi Frontpage memiliki banyak keterbatasan dan rentan terhadap kegagalan bisa dijelaskan - menggunakannya di risiko Anda sendiri!

Nama Domain

Jika Anda ingin nama domain Anda sendiri (misalnya www.myname.com) maka Anda akan perlu menerapkan kepada otoritas yang tepat. Topik ini akan dibahas dalam tutorial masa depan.

Berjalan terus

ke Langkah 5: Publish!

Langkah 5: Publish (upload)

Tahap akhir pembangunan adalah meng-upload. Menggunakan program transfer file, Anda menyalin struktur seluruh situs Web ke folder yang sesuai pada server host.

Jendela di bawah ini adalah dari program WS_FTP LE populer, tersedia dari www.ipswitch.com.FTP window

Jika Anda terbiasa dengan sistem manajemen file seperti MS Windows Explorer,

maka Anda tidak akan memiliki kesulitan dengan paket ini. Jendela kiri menampilkan situs pada drive lokal Anda, jendela kanan menampilkan situs pada server host Anda. Anda hanya memandu program ke folder yang sesuai dan gunakan panah kiri / kanan untuk mentransfer file yang dipilih.

Aplikasi situs authoring Beberapa memiliki pilihan untuk mempublikasikan langsung ke web. Ini mungkin sebagian besar otomatis, seperti perintah "Publish" di Frontpage atau "Sinkronisasi" perintah di Dreamweaver. Perintah-perintah ini dapat mengidentifikasi file yang telah dimodifikasi sejak terakhir kali Anda diterbitkan dan memberitahu Anda mana yang perlu diperbarui. Jika Anda memiliki situs yang besar, ini bisa menjadi besar penghematan waktu.

Itulah akhir dari tutorial ini. Kami berharap itu telah berguna. Dari sini, hal terbaik yang dapat Anda lakukan adalah mempelajari lebih lanjut tentang HTML.

Hyperlink

Hyperlink dibuat dengan tag "href" (referensi hyperlink). Dalam bentuk yang paling sederhana itu tag terlihat seperti ini:

href="page1.html"> <a Kembali ke Halaman 1 </ a>

Dalam contoh ini, teks "Kembali ke Halaman 1" menjadi hyperlink ke halaman yang disebut "page1.html". Link terlihat seperti ini:Pergi ke halaman 1

Ada dua jenis yang berbeda dari hyperlink: "mutlak" dan "relatif". Link Absolute cukup sederhana, tapi link relatif mengambil sedikit membiasakan diri. Link Relatif sebenarnya dibagi menjadi dua kategori lanjut: "Dokumen-relatif" dan "situs-root-relative".Absolute Links

Sebuah link absolut (atau "link URL absolut") berisi alamat internet lengkap, sama seperti jika Anda mengetik alamat ke address bar browser Anda. Tidak peduli di mana halaman sumber dalam kaitannya dengan halaman tujuan, link akan selalu bekerja selama halaman tujuan ada. Link yang paling mutlak dimulai dengan "http://" dan mengikuti format sederhana:

href="http://www.mysite.com/index.html"> <a Kembali ke Situs saya </ a>Dokumen-Relatif Links

Dokumen-relatif link menggunakan petunjuk dari halaman sumber ke halaman tujuan, semacam seperti mengatakan "Mulai di sini kemudian ikuti jalan ini sampai Anda mencapai tujuan".

Direktori TreeThere tiga cara untuk melakukan hal ini - metode yang Anda gunakan akan tergantung pada lokasi sumber dan halaman tujuan dalam hubungan satu sama lain. Kami akan menggunakan contoh di sebelah kanan dan membuat hyperlink dari halaman yang disebut sourcepage.html ke halaman lain di situs tersebut.

(1) Jika halaman tujuan dalam direktori yang sama seperti halaman sumberYang Anda perlu menentukan adalah nama file sumber:

href="page1.html"> <a Kembali ke Halaman 1 </ a>

(2) Jika halaman tujuan dalam folder di dalam folder sumber halaman iniTentukan nama folder dan kemudian nama file:

href="directory2/page2.html"> <a Kembali ke Halaman 2 </ a>

(3) Jika halaman tujuan dalam folder luar folder sumber halaman iniGunakan instruksi khusus .. / yang berarti "satu direktori yang lebih tinggi".

Link berikut berarti "Naik satu tingkat direktori, kemudian pergi ke sebuah folder bernama directory3, kemudian ke sebuah file bernama page3.html":

href="../directory3/page3.html"> <a Kembali ke Halaman 3 </ a>

Anda dapat mengulangi .. itu / untuk membuat link lebih dari satu tingkat yang lebih tinggi, misalnya, "Pergilah dua tingkat, ke file bernama index.html":

href="../../index.html"> <a Kembali ke Page Index </ a>

Catatan Penting: Untuk link relatif untuk bekerja, Anda harus menjaga struktur file utuh. Misalnya, jika Anda memindahkan file sourcepage.html ke dalam folder directory2, link relatif tidak lagi bekerja. Dalam hal ini Anda akan perlu menambahkan .. lain / menunjukkan link ke tingkat yang benar. Sebagai contoh:

href="../../../index.html"> <a Kembali ke Page Index </ a>Situs-Akar-Relatif Links

Situs-root-relative link menggunakan satu maju-slash / untuk menandakan instruksi: ". Mulai dari akar dokumen situs dan turun jalur direktori dari sana" Formatnya adalah:

href="/main-directory/directory4/page4.html"> <a Ke halaman 4 </ a>

Meskipun nama rumit, metode ini cukup sederhana. Link dimulai pada tingkat yang sama sebagai domain Anda dan bekerja turun dari sana. Link di atas adalah sama dengan:

href="http://www.mysite.com/main-directory/directory4/page4.html"> <a Ke halaman 4 </ a>

Metode ini memiliki keuntungan yang signifikan tinggal utuh jika Anda memindahkan sumber halaman. Link yang sama persis akan bekerja dari halaman

manapun di situs.

Catatan:

Metode ini tidak akan bekerja pada file pada hard drive Anda sendiri kecuali Anda menjalankan mereka melalui server web pribadi. Namun setelah Anda meng-upload halaman ke server Anda mereka akan bekerja. Jika situs Anda tidak memiliki nama domain sendiri, metode ini kemungkinan akan menimbulkan masalah. Konsultasikan dengan penyedia hosting Anda untuk informasi lebih lanjut.

Target

Anda dapat menentukan target atau jendela frame untuk hyperlink. Di sinilah halaman terkait akan terbuka. Jika target tidak ditentukan, link akan terbuka di jendela yang sama / frame. Format ini (di mana targetnya adalah "diri"):

<a href="page1.html" Go target="_self"> Ke Halaman 1 </ a>

Pilihan jendela target adalah:_self: Membuka di jendela yang sama dan frame yang sama._top: Membuka di jendela yang sama, mengambil jendela penuh jika ada lebih dari satu frame._parent: Membuka dalam kerangka induk._blank: Membuka di jendela baru.

Jika Anda memiliki sebuah frameset ditetapkan, Anda dapat mengatur target Anda sebagai frame tertentu. Misalnya, jika Anda memiliki bingkai navigasi yang disebut "nav" dan kerangka utama yang disebut "utama", menetapkan target link navigasi Anda seperti:

<a href="page1.html" target="main"> Kembali ke Halaman 1 </ a><a href="page2.html" target="main"> Kembali ke Halaman 2 </ a>

Dll ...

Catatan: Alih-alih menentukan target untuk setiap link individu, Anda dapat menentukan "Target dasar" untuk seluruh frame atau halaman. Ini berarti bahwa setiap link pada halaman akan menggunakan target dasar secara default. Tempatkan tag dasar sasaran di kepala halaman. Contoh:

<base target="_blank">Link ke Bagian Tertentu Page a (Hyperlink internal)

Sebuah hyperlink internal adalah link yang menunjuk ke bagian tertentu dari halaman. Hal ini dapat berguna dalam halaman panjang dengan banyak sub-bagian. Sebagai contoh, link di bagian atas halaman ini adalah link internal menunjuk ke masing-masing sub-judul.

Hyperlink internal memerlukan tag anchor dengan atribut "nama" seperti:

<a name="part2"> Part 2 </ a>

Buat jangkar seperti ini di tempat di halaman yang ingin Anda link ke. Tidak masalah jika ada sesuatu antara tag membuka dan menutup.

Kemudian membuat hyperlink yang mengacu pada anchor ini dengan hash (#) seperti:

href="#part2"> <a Kembali ke Bagian 2 </ a>

Ini mengasumsikan bahwa jangkar nama pada halaman yang sama dengan hyperlink. Untuk link ke jangkar pada halaman tujuan yang terpisah, cukup membuat link normal dengan nama anchor ditambahkan ke nama file seperti:

href="page1.html#part2"> <a Kembali ke Halaman 1, Bagian 2 </ a>

Catatan:

Browser memperlakukan link internal dengan cara yang persis sama seperti link normal, yaitu seolah-olah mereka adalah halaman terpisah. Hal ini dapat mengakibatkan beberapa kebingungan dengan tombol back dan forward. Jika hyperlink internal pada halaman yang sama tidak bekerja, cobalah termasuk nama file halaman dalam hyperlink (seperti jika Anda menghubungkan ke halaman yang terpisah). Kadang-kadang hyperlink internal yang tidak bekerja di halaman pada hard drive Anda kecuali jika Anda menjalankan server web pribadi. Mereka akan bekerja ketika Anda upload ke situs Anda.

E-Mail Links (mailto)

E-Mail link, atau dikenal sebagai link "mailto", menggunakan format berikut:

href="mailto:myname@mysite.com"> <a Klik disini untuk Email Me </ a>

Jenis link adalah kasus khusus, sama sekali berbeda dengan yang dijelaskan di atas. Alih-alih menghubungkan ke tempat di internet, mengklik link ini menyebabkan komputer pengguna untuk membuka email default itu program (misalnya Outlook Express, Eudora, dll) dan mempersiapkan email kosong ke alamat tertentu. Pengguna kemudian memasukkan pesan mereka dan mengirimkan email dengan cara biasa.

Jika Anda ingin menjadi rumit, Anda dapat menambahkan "tunduk" atribut link. Hal ini secara otomatis akan menyisipkan baris subjek tertentu ke email:

<a href="mailto:myname@mysite.com?subject=Inquiry Dari Website"> Klik disini untuk Email Me </ a>

Catatan:

Atribut subjek tidak bekerja di semua browser / email program. Program-program yang tidak mendukung mungkin akan mengabaikannya saja, tetapi tidak ada jaminan bahwa hal itu tidak akan menyebabkan kesalahan. Gunakan dengan resiko anda sendiri. Sadarilah bahwa menggunakan link mailto di website Anda adalah undangan terbuka untuk spam. Program jahat yang disebut "pemanen email" troll internet mencari link ini - ketika mereka menemukan Anda mereka akan menambahkannya ke database bagi para spammer. Ini sebabnya kami menyarankan menggunakan formulir kontak daripada link mailto sedapat mungkin.Hyperlink

Hyperlink dibuat dengan tag "href" (referensi hyperlink). Dalam bentuk yang paling sederhana itu tag terlihat seperti ini:

href="page1.html"> <a Kembali ke Halaman 1 </ a>

Dalam contoh ini, teks "Kembali ke Halaman 1" menjadi hyperlink ke halaman yang disebut "page1.html". Link terlihat seperti ini:Pergi ke halaman 1

Ada dua jenis yang berbeda dari hyperlink: "mutlak" dan "relatif". Link Absolute cukup sederhana, tapi link relatif mengambil sedikit membiasakan diri. Link Relatif sebenarnya dibagi menjadi dua kategori lanjut: "Dokumen-relatif" dan "situs-root-relative".Absolute Links

Sebuah link absolut (atau "link URL absolut") berisi alamat internet lengkap, sama seperti jika Anda mengetik alamat ke address bar browser Anda. Tidak peduli di mana halaman sumber dalam kaitannya dengan halaman tujuan, link akan selalu bekerja selama halaman tujuan ada. Link yang paling mutlak dimulai dengan "http://" dan mengikuti format sederhana:

href="http://www.mysite.com/index.html"> <a Kembali ke Situs saya </ a>Dokumen-Relatif Links

Dokumen-relatif link menggunakan petunjuk dari halaman sumber ke halaman tujuan, semacam seperti mengatakan "Mulai di sini kemudian ikuti jalan ini sampai Anda mencapai tujuan".

Direktori TreeThere tiga cara untuk melakukan hal ini - metode yang Anda gunakan akan tergantung pada lokasi sumber dan halaman tujuan dalam hubungan satu sama lain. Kami akan menggunakan contoh di sebelah kanan dan membuat hyperlink dari halaman yang disebut sourcepage.html ke halaman lain di situs tersebut.

(1) Jika halaman tujuan dalam direktori yang sama seperti halaman sumberYang Anda perlu menentukan adalah nama file sumber:

href="page1.html"> <a Kembali ke Halaman 1 </ a>

(2) Jika halaman tujuan dalam folder di dalam folder sumber halaman iniTentukan nama folder dan kemudian nama file:

href="directory2/page2.html"> <a Kembali ke Halaman 2 </ a>

(3) Jika halaman tujuan dalam folder luar folder sumber halaman iniGunakan instruksi khusus .. / yang berarti "satu direktori yang lebih tinggi".

Link berikut berarti "Naik satu tingkat direktori, kemudian pergi ke sebuah folder bernama directory3, kemudian ke sebuah file bernama page3.html":

href="../directory3/page3.html"> <a Kembali ke Halaman 3 </ a>

Anda dapat mengulangi .. itu / untuk membuat link lebih dari satu tingkat yang lebih tinggi, misalnya, "Pergilah dua tingkat, ke file bernama index.html":

href="../../index.html"> <a Kembali ke Page Index </ a>

Catatan Penting: Untuk link relatif untuk bekerja, Anda harus menjaga struktur file utuh. Misalnya, jika Anda memindahkan file sourcepage.html ke dalam folder directory2, link relatif tidak lagi bekerja. Dalam hal ini Anda akan perlu menambahkan .. lain / menunjukkan link ke tingkat yang benar. Sebagai contoh:

href="../../../index.html"> <a Kembali ke Page Index </ a>Situs-Akar-Relatif Links

Situs-root-relative link menggunakan satu maju-slash / untuk menandakan instruksi: ". Mulai dari akar dokumen situs dan turun jalur direktori dari sana" Formatnya adalah:

href="/main-directory/directory4/page4.html"> <a Ke halaman 4 </ a>

Meskipun nama rumit, metode ini cukup sederhana. Link dimulai pada tingkat yang sama sebagai domain Anda dan bekerja turun dari sana. Link di atas adalah sama dengan:

href="http://www.mysite.com/main-directory/directory4/page4.html"> <a Ke halaman 4 </ a>

Metode ini memiliki keuntungan yang signifikan tinggal utuh jika Anda memindahkan sumber halaman. Link yang sama persis akan bekerja dari halaman manapun di situs.

Catatan:

Metode ini tidak akan bekerja pada file pada hard drive Anda sendiri kecuali Anda menjalankan mereka melalui server web pribadi. Namun setelah Anda meng-upload halaman ke server Anda mereka akan bekerja.

Jika situs Anda tidak memiliki nama domain sendiri, metode ini kemungkinan akan menimbulkan masalah. Konsultasikan dengan penyedia hosting Anda untuk informasi lebih lanjut.

Target

Anda dapat menentukan target atau jendela frame untuk hyperlink. Di sinilah halaman terkait akan terbuka. Jika target tidak ditentukan, link akan terbuka di jendela yang sama / frame. Format ini (di mana targetnya adalah "diri"):

<a href="page1.html" Go target="_self"> Ke Halaman 1 </ a>

Pilihan jendela target adalah:_self: Membuka di jendela yang sama dan frame yang sama._top: Membuka di jendela yang sama, mengambil jendela penuh jika ada lebih dari satu frame._parent: Membuka dalam kerangka induk._blank: Membuka di jendela baru.

Jika Anda memiliki sebuah frameset ditetapkan, Anda dapat mengatur target Anda sebagai frame tertentu. Misalnya, jika Anda memiliki bingkai navigasi yang disebut "nav" dan kerangka utama yang disebut "utama", menetapkan target link navigasi Anda seperti:

<a href="page1.html" target="main"> Kembali ke Halaman 1 </ a><a href="page2.html" target="main"> Kembali ke Halaman 2 </ a>Dll ...

Catatan: Alih-alih menentukan target untuk setiap link individu, Anda dapat menentukan "Target dasar" untuk seluruh frame atau halaman. Ini berarti bahwa setiap link pada halaman akan menggunakan target dasar secara default. Tempatkan tag dasar sasaran di kepala halaman. Contoh:

<base target="_blank">Link ke Bagian Tertentu Page a (Hyperlink internal)

Sebuah hyperlink internal adalah link yang menunjuk ke bagian tertentu dari halaman. Hal ini dapat berguna dalam halaman panjang dengan banyak sub-bagian. Sebagai contoh, link di bagian atas halaman ini adalah link internal menunjuk ke masing-masing sub-judul.

Hyperlink internal memerlukan tag anchor dengan atribut "nama" seperti:

<a name="part2"> Part 2 </ a>

Buat jangkar seperti ini di tempat di halaman yang ingin Anda link ke. Tidak masalah jika ada sesuatu antara tag membuka dan menutup.

Kemudian membuat hyperlink yang mengacu pada anchor ini dengan hash (#) seperti:

href="#part2"> <a Kembali ke Bagian 2 </ a>

Ini mengasumsikan bahwa jangkar nama pada halaman yang sama dengan hyperlink. Untuk link ke jangkar pada halaman tujuan yang terpisah, cukup membuat link normal dengan nama anchor ditambahkan ke nama file seperti:

href="page1.html#part2"> <a Kembali ke Halaman 1, Bagian 2 </ a>

Catatan:

Browser memperlakukan link internal dengan cara yang persis sama seperti link normal, yaitu seolah-olah mereka adalah halaman terpisah. Hal ini dapat mengakibatkan beberapa kebingungan dengan tombol back dan forward. Jika hyperlink internal pada halaman yang sama tidak bekerja, cobalah termasuk nama file halaman dalam hyperlink (seperti jika Anda menghubungkan

ke halaman yang terpisah). Kadang-kadang hyperlink internal yang tidak bekerja di halaman pada hard drive Anda kecuali jika Anda menjalankan server web pribadi. Mereka akan bekerja ketika Anda upload ke situs Anda.

E-Mail Links (mailto)

E-Mail link, atau dikenal sebagai link "mailto", menggunakan format berikut:

href="mailto:myname@mysite.com"> <a Klik disini untuk Email Me </ a>

Jenis link adalah kasus khusus, sama sekali berbeda dengan yang dijelaskan di atas. Alih-alih menghubungkan ke tempat di internet, mengklik link ini menyebabkan komputer pengguna untuk membuka email default itu program (misalnya Outlook Express, Eudora, dll) dan mempersiapkan email kosong ke alamat tertentu. Pengguna kemudian memasukkan pesan mereka dan mengirimkan email dengan cara biasa.

Jika Anda ingin menjadi rumit, Anda dapat menambahkan "tunduk" atribut link. Hal ini secara otomatis akan menyisipkan baris subjek tertentu ke email:

<a href="mailto:myname@mysite.com?subject=Inquiry Dari Website"> Klik disini untuk Email Me </ a>

Catatan:

Atribut subjek tidak bekerja di semua browser / email program. Program-program yang tidak mendukung mungkin akan mengabaikannya saja, tetapi tidak ada jaminan bahwa hal itu tidak akan menyebabkan kesalahan. Gunakan dengan resiko anda sendiri. Sadarilah bahwa menggunakan link mailto di website Anda adalah undangan terbuka untuk spam. Program jahat yang disebut "pemanen email" troll internet mencari link ini - ketika mereka menemukan Anda mereka akan

menambahkannya ke database bagi para spammer. Ini sebabnya kami menyarankan menggunakan formulir kontak daripada link mailto sedapat mungkin.

Hyperlink

Hyperlink dibuat dengan tag "href" (referensi hyperlink). Dalam bentuk yang paling sederhana itu tag terlihat seperti ini:

href="page1.html"> <a Kembali ke Halaman 1 </ a>

Dalam contoh ini, teks "Kembali ke Halaman 1" menjadi hyperlink ke halaman yang disebut "page1.html". Link terlihat seperti ini:Pergi ke halaman 1

Ada dua jenis yang berbeda dari hyperlink: "mutlak" dan "relatif". Link Absolute cukup sederhana, tapi link relatif mengambil sedikit membiasakan diri. Link Relatif sebenarnya dibagi menjadi dua kategori lanjut: "Dokumen-relatif" dan "situs-root-relative".Absolute Links

Sebuah link absolut (atau "link URL absolut") berisi alamat internet lengkap, sama seperti jika Anda mengetik alamat ke address bar browser Anda. Tidak peduli di mana halaman sumber dalam kaitannya dengan halaman tujuan, link akan selalu bekerja selama halaman tujuan ada. Link yang paling mutlak dimulai dengan "http://" dan mengikuti format sederhana:

href="http://www.mysite.com/index.html"> <a Kembali ke Situs saya </ a>Dokumen-Relatif Links

Dokumen-relatif link menggunakan petunjuk dari halaman sumber ke halaman tujuan, semacam seperti mengatakan "Mulai di sini kemudian ikuti jalan ini sampai Anda mencapai tujuan".

Direktori TreeThere tiga cara untuk melakukan hal ini - metode yang Anda gunakan akan tergantung pada lokasi sumber dan halaman tujuan dalam hubungan satu sama lain.

Sebagai contoh:

Catatan:

Contoh:

Catatan:

Catatan:ContohPenjajaran<table>

2-1

=

2-13-1Catatan:

Berikut adalah beberapa contoh:

2-12-1=

2-1