Membuat Hyperlink pada HTML

Anda juga dapat Anda menggunakan tag anchor untuk memperlihatkan sebuah gambar. Jika link tersebut diklik, gambar akan terlihat pada browser Anda. Untuk menggunakannya sama halnya dengan membuat link untuk dokumen HTML lain. a h r e f = ” n a m a f i l e g a m b a r b e s e r t a ekstensinya”teks hyperlinka Tentunya ile gambar tersebut harus berada dalam folder yang sama dengan ile HTML yang Anda buat. Bagaimana jika ile dokumen HTML atau gambar tersebut berada di folder yang berbeda dengan dokumen HTML yang sedang Anda kerjakan? Mungkin Anda ingin membuat sebuah folder khusus gambar karena ketika pengerjaan semakin kompleks, Anda tentu ingin gambar-gambar berada dalam satu tempat agar pengerjaan lebih rapi. Untuk dapat melakukan, buatlah sebuah folder baru pada folder Myweb, beri nama folder tersebut dengan gambar. a. Simpan ile gambar, seperti friends.jpg Anda dalam folder tersebut. b. Buka kembali dokumen HTML index.html menggunakan notepad. c. Edit tag img src=”friends.jpg.” menjadi seperti berikut. img src=”gambarfriends.jpg” d. Anda akan melihat bahwa gambar yang Anda simpan tidak berubah. Ini menandakan bahwa tag yang Anda buat sudah benar. Coba Anda hapus “gambar” pada tag img... yang Anda buat. Apa yang terjadi? Link yang Anda buat sebelumnya disebut juga dengan relative link. Artinya, web browser dapat membangun URL lengkap berdasarkan lokasi dokumen HTML berada dan informasi tag yang dibuat pada dokumen URL. Hal ini sangat berguna, karena meskipun Anda mengerjakan web dalam satu komputer, membukanya, kemudian membawa folder beserta file dokumen HTML ke komputer lain dan membukanya kembali, semua link relatif akan tetap ada. Anda akan tetap memiliki halaman web yang utuh beserta semua linknya. Jika hyperlink diklik akan muncul halaman 2 seperti ini. Gambar 4.8 Tips Trik Beberapa sistem komputer sensitif terhadap besar kecil huruf ekstensi gambar. Contohnya, ile “friends.jpg” berbeda dengan “friends. JPG”. Oleh karena itu, disarankan untuk konsisten menggunakan huruf kecil untuk semua kode HTML yang Anda buat. Info TIK Dengan HTML, Anda dapat memerintahkan web browser Anda untuk membuka ile semua dokumen atau gambar yang disimpan pada tingkat direktori lebih rendah. Seperti pada subdirektori atau folder yang berada pada folder dokumen HTML yang Anda kerjakan dengan menggunakan karakter “”. karakter ini menandakan perpindahan subdirektori yang dituju. Hal ini juga berlaku bagi hyperlink ke halaman web lain. 113 Pembuatan Homepage 114 Jika sebelumnya Anda telah mengetahui cara menyisipkan gambar yang terdapat pada subdirektori, Anda juga dapat membangun link untuk direktori pada level lebih tinggi menggunakan karakter””. Misalkan, Anda memiliki sebuah file HTML dengan nama myfriends.html yang disimpan pada subdirektorifolder friends. Pada ile HTML tersebut digunakan juga gambar yang sama. Berikut ini gambaran organisasi foldernya. Agar Anda mahir dan memahami benar pentingnya struktur direktori bagi HTML, kerjakanlah kegiatan berikut. 1 Masukkan tag berikut pada dokumen HTML friends.html menggunakan Notepad. DOCTYPE HTML PUBLIC “-W3CDTD HTML 4.0EN” html body myfriends pimg src=”..gambarfriends.jpg”a body html 2 Perhatikan tag img... Sebelumnya Anda telah membuat tag berikut. img src=”gambarfriends.jpg” Tips Trik Terkadang sebuah URL halaman web atau objek tertentu sangatlah panjang untuk dituliskan. Untuk itu, sebaiknya Anda menyalin alamat situs yang Anda kunjungi dan ingin Anda masukkan dalam halaman web . Caranya, salin URL halaman situs tersebut yang tercantum pada kolom address dan simpan pada dokumen Notepad atau program pengolah kata untuk selanjutnya Anda masukkan dalam tag anchor. Gambaran organisasi folder pada homepage. Organisasi yang baik sangat penting dalam pembuatan dokumen HTML. Gambar 4.9 Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI Tag ini dibuat untuk mencari gambar pada subdirektori “gambar”. Adapun pada dokumen friends.html dituliskan img src=”..gambarfriends.jpg”a Tag dengan karakter “..” ini dibuat untuk memerintahkan web browser mencari gambar bernama friends.jpg satu tingkat direktori dari dokumen, pada direktori “gambar”. 3 Jika kamu telah mencoba langkah-langkah tersebut dan mendapati gambar pada dokumen friends.html yang dibuka menggunakan browser, maka Anda telah berhasil memasukkan tag tersebut. Berikut hasilnya. 4 Anda juga dapat membuat link kembali ke halaman sebelumnya dengan aturan “..”. Masukkan tag berikut setelah tag gambar img... pa href=”..index.html”Kembalia 5 Refresh browser Anda dan lihat hasilnya. Anda dapat kembali ke halaman web sebelumnya dengan mengklik Kembali . Hasil yang akan Anda dapatkan jika memasukkan tag dengan benar Gambar 4.10 Tampilan web dengan hyperlink “Kembali” Gambar 4.11 115 Pembuatan Homepage 116 Anda juga dapat membuat link menuju situs-situs di internet. Tentunya agar link ini dapat dicoba, komputer Anda harus terhubung dengan internet. Perlu Anda ingat bahwa URL ini dapat Anda dihubungkan dengan server WWW lain, server Gopher, situs FTP, teks, gambar, suara, atau ile video pada server tersebut. Untuk menambahkan link ke situs internet cukup masukkan tag berikut a h r e f = ” U R L s i t u s i n t e r n e t ” T e k s hyperlinka contohnya a h r e f = ” h t t p : w w w . w i k i p e d i a . org”Wikipedia ensiklopedia terbesara, atau a href=http:kahfiez.blogspot.comr pictureslembang1.jpgfoto lembanga

9. Menampilkan Teks yang Telah Diformat

Anda dapat menampilkan teks dengan format yang sesuai terlihat pada Notepad. Untuk melakukannya, gunakan tag pre…teks…pre di dalam body. Berikut contohnya. pre Nama Kelas ==== ==== Agus 2A Dani 2B Dadan 2C pre Tulisan yang Anda edit di Notepad, dengan tag pre, akan diperlihatkan di browser dengan format yang sama. Tabel 4.1 Beberapa Tag yang Sering Digunakan. Tag HTML Kegunaan Contoh font size=N…font Mengubah font teks; N=1-7; default=3 font size=5 teksfont Info TIK Anda telah mengetahui mudahnya memasukkan link sebuah halaman web atau objek dari situs lain ke dalam web Anda. Sebaiknya sebelum Anda melakukan hal tersebut, Anda meminta izin terlebih dahulu kepada pemilik situs tersebut untuk menggunakan objek situs miliknya. Biasanya pada setiap situs terdapat kontak e-mail pemilik atau pembuat situs yang dapat Anda hubungi. Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI font color=XX…font Mewarnai font, XX=warna, seperti red, lime, navy, atau bilangan hexadesimal untuk warna font color=redteksfont font color=993459teks font sup…sup Superscript teks, seperti x2 xsup2sup sub…sub Subscript teks, seperti H 2 O Hsub2subO u…u Garis bawah teks uteksu strike…?strike Garis tengah teks striketeksstrike body bgcolor =xxxxxx Warna latar body teks body bgcolor=000000 body text=xxxxxx Warna teks body body text=ffffcc body link=xxxxxx Warna teks hyperlink pada body body link=33ccff body vlink=xxxxxx Warna link yang pernah dikunjungi. bodr vlink=ff6666 body bgcolor=xxxxxx text=xxxxxx link=xxxxxx vlink=xxxxxx Parameter bg color, text, link , dan vlink untuk teks body dapat disatukan dalam satu tag body bgcolor=000000 text=ffffcc link=33ccffvlink =ff6666 p align=xxxx…p img src=”nama ile gambar” align=xxxx Menentukan kesejajaran aligment teks atau gambar; xxxx=center, right, atau left p align=centerteks p; img src=”friends.jpg” align=center Masih banyak tag-tag yang dapat Anda gunakan untuk membuat sebuah homepage yang baik. Namun tentunya Anda harus mengetahui, mencoba, dan melakukan berbagai perubahan yang diperlukan. Tugas Bersama teman sebangku Anda, buatlah homepage sederhana menggunakan HTML dengan tema tertentu. Carilah referensi lebih banyak mengenai pembuatan homepage. Buatlah homepage tersebut dengan jumlah halaman terkait lebih dari lima. Buatlah sebaik dan semenarik mungkin. Kumpulkan hasilnya kepada guru Anda. 117 Pembuatan Homepage 118 Uji Konsep 4.1 1. Apa yang dimaksud dengan HTML, tag, dan hyperlink? 2. Bagaimana cara membuat dokumen HTML? 3. Bagaimana cara melihat hasil akhir homepage yang Anda buat? Kerjakanlah soal-soal berikut dibuku latihan Anda. Membuat Halaman Homepage dengan MS Publisher 2007 B Telah dijelaskan sebelumnya, bahwa untuk membuat sebuah halaman web atau homepage, Anda kini dapat menggunakan beberapa perangkat lunak yang dapat membantu Anda tanpa harus mengetahui bahasa pemrograman HTML. Beberapa perangkat lunak tersebut, yaitu MS Frontpage yang terdapat pada MS O ice 97-2003 dan MS Publisher 2007 pada MS Oice 2007. Pada subbab ini Anda akan mempelajari cara membuat sebuah homepage sederhana menggunakan MS Publisher 2007. Sewaktu Anda melakukan instalasi MS Office 2007, secara otomatis MS Publisher akan terinstal bersama program MS Oice 2007 lainnya. Jika Anda masih menggunakan MS Frontpage 2003, dengan keinginan dan sedikit ketekunan, Anda juga dapat membuat sebuah homepage yang menarik. Baik pada MS Publisher 2007 atau MS Frontpage 2003 terdapat beberapa template halaman homepage yang dapat Anda pilih sehingga akan memudahkan Anda. MS Publisher merupakan salah satu program aplikasi MS Oice yang memiliki beragam fungsi. Secara umum, MS Publisher diperuntukkan sebagai aplikasi yang membantu pengguna membuat dan mempublikasikan beragam produk marketing dan komunikasi. Dengan MS Publisher, Anda dapat membuat produk cetak seperti brosur, kartu nama, kalender, kartu undangan, lyer, label, majalah, bahkan sebuah halaman web . Info TIK Sebelum Microsoft Office 2007 dan 2003, Microsoft menyertakan paket Office dengan aplikasi web editor MS FrontPage. Sejak MS Office 2003, paket MS FrontPage tidak termasuk paket MS Office dan dijual terpisah. Pada 2007, Microsoft mengeluarkan Microsoft Expression Web sebagai penggantinya. sumber: xigorapy.blogspot.com Praktis Belajar Teknologi Informasi dan Komunikasi untuk Kelas XI