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 href=”nama file gambar beserta 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 href=”URL situs internet”Teks 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 file
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 Oice 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
