| 1) Memulakan Halaman Anda | 4) Menukarkan Warna Huruf-huruf | 7) Membuat Hubungan Web (links) Anda | 10) Meletakkan Gambar Sebagai Latar Belakang | |
|
||||
Panduan ini hanya akan meliputi penanda-penanda ini, dan kod tambahan
untuk sebahagian daripadanya.
<html></html>,<head></head>,<title></title>,<body></body>,<p>,</p>,<br>,<i></i>,<b></b>,<img>,<a></a>
Berikut termasuk dalam penanda body <body>: bgcolor,
background, link, vlink, alink, text
Berikut termasuk dalam penanda penghubung <a>: name,
href
Ini termasuk dalam penanda gambar <img>: src
Kembali ke bahagian atas halaman ini
1) Memulakan dan Menamatkan halaman anda
Dalam bahagian ini, berikut akan diliputi: <html>,
</html>, <head>, </head>, <title>, </title>,
<body>, </body>
Mungkin sekarang ia kelihatan banyak dan rumit, tetapi penanda di atas
merupakan yang paling penting dalam halaman html anda
Mari kita mulakan
Anda bermula dengan penanda yang memberitahu browser anda bahawa
ia sedang membaca fail html;
<html>
Setiap halaman mesti mempunyai pendahulunya;
<head>
dan tajuk halaman dalam penanda pendahulu ini. (Bagi memberikan sebuah
nama yang bermakna dalam senarai penanda buku seseorang, bookmarks.)
<title>TajukHalamanAnda</title>
(Penanda</title> menamatkan bahagian tajuk anda)
Kemudian, bahagian pendahulu tamat.
</head>
Langkah seterusnya adalah memulakan kandungan halaman anda.
<body>
Anda telah meletakkan bahagian halaman anda yang memberitahu browser
apa yand dibaca. Bagi mengakhiri rangka halaman ini, anda perlu menamatkan
penanda-penanda seperti berikut.
</body>
</html>
Untuk memulakan halaman pertama anda, salin kod berikut, letakkannya
dalam Program Editor anda, kemudian, masukkan tajuk halaman anda.
<html>
<head>
<title>NamaHalamanAnda</title>
</head>
<body>
</body>
</html>
Sekarang simpanlah halaman tersebut dengan alamat html (yang berbeza
daripada tajuk).
Jika ini halaman kedua anda, tajuknya mungkin Ali dan Sani, tetapi
alamat htmlnya mungkin ads.html ataupun ads.htm, WALAU
BAGAIMANAPUN jika halaman yang sedang anda buat ialah halaman pertama tapak
Web anda, simpankan sebagai
Perhatian: para
pengguna Windows 3.1 perlu menamakannya semula setelah dimuat turunkan
ke akaun GeoCities, dan ubahkanlah sebarang penghubung (links) kepada
halaman index anda. Anda boleh menggunakan sambungan htm untuk semua halaman
yang lain.
Langkah alternatif yang lain adalah membuat halaman "pintu hadapan"
dengan mana-mana editor halaman GeoCities, buatkan link ke halaman
yang ingin anda jadikan halaman utama anda, yang boleh diberikan sebarang
nama, dan anda tidak perlu meletakkan link ke index.html, sebaliknya
kepada halaman utama itu!
Kandungan selanjutnya panduan ini meliputi butiran yang ditambahkan kepada penanda <body>, atau antara penanda <body> dan </body>
Kembali ke bahagian atas halaman ini
2) Warna Latar Belakang
Dalam bahagian ini, berikut akan dimasukkan kepada penanda <body>
tag: bgcolor
Kod yang digunakan untuk mengubah warna latar belakang ialah bgcolor,
dan ia dimasukkan ke dalam penanda <body>. Kod berikut menunjukkan
latar belakang halaman ini.
<body bgcolor="#C7FEDC">
Bahagian #C7FEDC ialah kod elektron untuk warna latar belakang ini.
(Sebenarnya ia hex, tetapi anda tidak perlu bimbang tentang itu.
Bgcolor memberitahu browser warna yang merujuk kepada latar belakang.
Perhatian:-terdapat ruang kosong antara body dan bgcolor.
Di bawah ini, ialah satu jadual dengan beberapa contoh warna, dan juga
kod elektron yang dimasukkan antara pembuka dan penuup kata.
| #004000 | #49BF11 | #008000 | #FFF1E3 | #008080 | #ECD0F4 | #004080 | #FFB38E | #8080C0 | #BE7D05 |
| #000000 | #26CDFD | #808080 | #D6D6AD | #FFFFFF | #FFFFEC | #E2E2E2 | #B8C9BE | #800080 | #CF9E9E |
| #800000 | #B08968 | #FF8080 | #E3F2F4 | #F7F2D0 | #B0A473 | #FFC4C4 | #8E8E00 | #FFFFB5 | #AC1313 |
Salinlah kod berikut, dan tampalkan dalam penanda <body> seperti
yang ditunjukkan di atas,
bgcolor="WarnaLatarBelakang"
dan masukkan warna yang telah anda pilih.
Setelah itu, simpankan fail anda, dan gunakan browser anda untuk
melihatnya. Jika anda tidak menyukai warna latar belakang itu, tukarkan
dengan program editor anda.
Jika anda mengikuti ini, bukakan window kedua, dengan membuka menu file,
dan taipkan alamat anda dalam ruang URL dalam window kedua anda, dan tekan
enter.
Kembali ke bahagian atas halaman ini
3) Memasukkan Hasil Tulisan Anda
Dalam bahagian ini, penanda berikut akan diliputi:<p>,
</p>, <br>
Jadi, anda ada sesuatu yang ingin disampaikan, Hmmmm.
Sebenarnya, semua orang juga, jadi anda bolehlah mengikutinya, tetapi sebelum
anda menaipkan autobiografi anda dengan gembiranya, ambil perhatian.
Langkah pertama yang perlu diambil ialah membuka perenggan anda. Untuk ini, anda menggunakan penanda <p>, yang bermakna.....buka perenggan. Seterusnya anda dapat menaipkan kata-kata pertama anda. Akhirnya, tutuplah perenggan itu dengan penanda </p>. (Saya rasa anda telahpun meneka apa makna penanda ini)
Mari kita hasilkan "siaran Web" pertama anda.
<p>Lihatlah semua, kata-kata pertama saya pada Internet</p>
akan ditunjukkan sebagai
Lihatlah semua, kata-kata pertama saya pada Internet
Anda mungkin melihat beberapa baris perkataan yang tiba-tiba tamat, dan satu baris baru bermula di bawahnya, walaupun terdapat selangan besar antara yang lain? Ini dapat dilakukan dengan meletakkan penanda penamat baris <br>, dalam suatu perenggan. Ayat-ayat di atas dalam bahagian ini, merupakan contoh baik penggunaan penanda ini.
<p>Lihatlah semua, <br>kata-kata pertama saya pada
Internet</p>
akan ditunjukkan sebagai
Lihatlah semua,
kata-kata pertama saya pada Internet
OK, masukkan teks/tulisan/karya anda, simpankan halaman anda, kemudian gunakan browser anda untuk melihatnya. Buka window kedua jika anda sekarang pada Internet.
Kembali ke bahagian atas halaman ini
4) Menetapkan Warna
teks anda
Dalam bahagian ini, berikut akan dimasukkan ke dalam penanda
<body>: text
Jika saya menetapkan hitam sebagai warna latar belakang halaman ini,
pastinya tiada siapa yang akan dapat membaca teks, melainkan jika saya
menukarkan warna teks saya. Jika anda menetapkan warna yang kelam bagi
latar belakang anda, bahagian ini pasti akan menarik minat anda.
Jika anda mahu warna segala teks anda untuk bersesuaian dengan latar belakang,
anda perlu menambahkan lagi kepada penanda <body>.
Tambakan berikut kepada penanda <body> anda: text="WarnaTeksAnda" - Cuma itu sahaja. Anda dapat menggunakan satu warna daripada jadual di atas.
Sekarang penanda <body> anda
akan kelihatan sebegini.
<body bgcolor="WarnaLatarBelakang" text="WarnaTeksAnda">
Huraian pendek lagi mudah, kan? Mari kita maju ke bahagian seterusnya, lihat adakah ia lebih pendek lagi.
Kembali ke bahagian atas halaman ini
5) Huruf-huruf condong dan Huruf-huruf
tebal
Dalam bahagian ini, berikut akan deperkenalkan:<b></b>,<i></i>
<b> dan </b> Apabila teks anda dilingkunginya, anda mendapat huruf-huruf tebal
<i> dan </i> Apabila teks anda dilingkunginya, anda mendapat huruf-huruf condong
Sekali lagi anda perlu menamatkan penanda-penanda
ini bagi mengelakkan teks biasa anda menjadi tebal atau condong.
Cubalah beberapa patah perkataan pada halaman anda dengan meletakkan
<b>TeksAnda</b> atau <i>TeksAnda</i>,
ataupun <b><i>TeksAnda</i></b>
dalam kod anda, dan lihatlah apa yang berlaku.
Ya, bahagian ini lebih pendek daripada bahagian tadi!
Kembali ke bahagian atas halaman ini
6) Saiz
Tajuk
Dalam bahagian ini, berikut akan
diperkenalkan: <h#></h#> di mana # adalah angka 1 hingga
7
Bahagian ini tidak akan meliputi cara-cara mengubah saiz teks biasa. Bagi
mempelajarinya, lihat link pilihan di Halaman
Bantuan RainForest.
Bagi mengubah saiz tajuk, anda boleh menggunakan penanda yang dibuat khas untuk tajuk. Ketika menggunakan penanda tajuk, jangan lupa untuk menamatkannya.
Jadi, setelah melihat saiz-saiz untuk tajuk, pergi
ke baris di mana anda ingin meletakkan tajuk, gantikan <p> dengan
saiz tajuk yang diinginkan, dan gantikan </p> dengan penamat tajuk
yang sama nilai angkanya, ataupun anda boleh memasukkan tajuk anda terus
selepas penanda <body>.
PERHATIAN: anda mesti menamatkan dengan nilai # yang sama,
jika tidak, saiz tajuk anda tidak akan ditutup, yang akan megakibatkan
halaman anda kelihatan ganjil!
Kembali ke bahagian atas halaman ini
7) Membuat Hubungan Web (links) Anda
Bahagian ini akan memperkenalkan penanda,
dan juga tambahan penanda: <a></a>,name, href
Setakat ini anda mungkin telah beberapa kali menggunakan
penghubung, link, pada halaman ini dan ingin membolehkan halaman
anda melompat ke sana-sini juga.
Pada dasarnya, terdapat dua bahagian yang dibincangkan di sini:
1) <a href="alamat/kedudukan/#nama">Perkara yang dapat
diklik/ditekan</a>
2) <a name="nama hubungan">Perkara yang disasarkan oleh
penghubung</a>
Baiklah, mari kita bermula:
Hubungan dalam lingkungan sesuatu halaman
Untuk bermula, lihatlah ini,
<a href="#gothere">Membuat Hubungan Web</a>
akan berkesudahan seperti berikut a href="#gothere">
Membuat Hubungan Web Kod ini meliputi perkara pertama.
Penanda <a membuka hubungan anda (a mewakili anchor,
alat penstabil), dan </a> menamatkannya, seterusnya menghasilkan
penghubung yang dapat diklik.
href="#gothere"> merupakan alamat rujukan, #
memberitahu browser anda untuk tinggal pada halaman ini, dan bergerak
ke sasaran yang dinamakan "gothere".
Membuat Hubungan Web ialah teks yang anda lihat.
Kod seterusnya mungkin kelihatan sama, walau bagaimanapun, ia menamakan sasaran anda. Teks, dalam hal ini, ialah sasaran itu sendiri dan ia terletak jauh daripada teks penghubung anda.
<a name="gothere">Membuat Hubungan Web</a>
name="gothere" menamakan sasaran anda sebagai gothere.
Perhatikan bahawa tiada tanda #. Tanda # hanya digunakan pada penghubung
sebenar, tidak digunakan pada sasaran. Anda boleh menetapkan sebarang nama
untuk sasaran anda, tetapi anda mesti merujuk kepadanya dalam kod pengubung
di atas agar hubungan anda dapat berfungsi.
Membuat Hubungan Web -Inilah sasaran sebenar, dan ini tempat anda
sampai ketika menekan/klik penghubung tadi. Saya dapat menggunakan huruf
pertama sebagai sasaran, hubungan akan berfungsi juga, tetapi saya perlu
meletakkan teks selanjutnya selepas </a>, sebegini;
<a name="gothere">M</a>embuat Hubungan Web
Hubungan dalam lingkungan tapak Web anda
(Keluar daripada halaman pertama)
Ini mungkin mengelirukan juga, dengan dua pilihan yang dapat
digunakan.
Pertamanya, anda ingin bergerak ke satu halaman lain dalam tapak Web
anda, ataupun
keduanya, anda ingin bergerak ke tempat tertentu (tempat yang diletakkan
name) pada halaman yang lain itu.
Kod <a href="index.html">Halaman Utama</a>
akan membawa anda ke permulaan muka hadapan, dengan menetapkan "Halaman
Utama" sebagai teks yang dapat diklik.
Perbezaan antara hubungan jenis ini, dengan yang di atas, ialah rujukan
terus kepada fail html (index.html). Mudah, setelah membaca butiran di
atas, kan?
Sekarang, lanjutan idea ini, adalah untuk menghubungkan kepada satu sasaran pada halaman yang lain. Derikut merupakan kod yang akan membawa anda ke sasaran "search" pada halaman yang lain daripada halaman di mana penghubung anda diletakkan.
<a href="index.html#search">Home</a>
index.html kemungkinan besar ialah halaman utama anda, manakala
# mengarahkan browser anda untuk mencari sasaran pada halaman
itu yang dinamakan search.
Jadi, jika satu daripada halaman anda merujuk kepada perkara yang terletak
pada bahagian tengah halaman yang lain, namakan sasaran pada halaman kedua
itu di tempat yang anda ingin orang tuju, dan tetapkan penghubung pada
halaman pertama tadi supaya menghubungkan kepada sasaran itu.
Hubungan ke halaman orang lain
Setelah semua di atas, bahagian ini dapat dikatakan mudah.
Jika ita mengambil kod berikut <a href="index.html">Home</a>,
dan menggantikan "index.html" dengan "http://....alamat
selanjutnya", dan teks "Home" dengan "LawatHalamanRakanSaya",
anda mendapat hubungan yang bergerak ke tapak Web rakan anda semasa anda
menekan teks "LawatHalamanRakanSaya".
<a href="http://....alamat selanjutnya">LawatHalamanRakanSaya</a>
Kembali ke bahagian atas halaman ini
8) Menetapkan Warna Penghubung
Dalam bahagian ini, berikut akan dimasukkan ke
dalam penanda <body>: link, vlink, alink
OK. Penetapan warna penghubung dibuat dalam penanda <body>:, begitu juga dengan penetapan penting halaman yang lain.
<body bgcolor="#C7FEDC" link="#6D04FB" vlink="#800080" alink="#FF0000"> merupakan penetapan warna penghubung pada halaman ini, di samping warna latar belakang (bgcolor) yang telah diterangkan di atas. Tiada penetapan warna teks, setelah saya membuat keputusan tidak menggunakannya. Kesannya, teks berwarna hitam (jika warna biasa/default browser anda hitam)
LINK= "WarnaAnda" menetapkan
warna penghubung sebelum ia digunakan
VLINK= "WarnaAnda" menetapkan
warna hubungan yang telah anda lawati, memberitahu anda di mana anda telah
kunjungi.
ALINK= "WarnaAnda" menetapkan
warna penhubung yang aktif (sedang diklik)
Jadi tuan-tuan dan puan-puan, salin kod ini dan masukkan warna-warna yang diinginkan.
link="WarnaPenghubung" vlink="WarnaPenghubungV" alink="WarnaPenghubungA"
Ingat, jika anda menetapkan warna di atas seakan-akan warna latar belakang, ataupun warna teks, ia tidak akan dapat dilihat dan menjadikan kunjungan ke halaman anda kurang menyeronokkan malah menjanggalkan.
Kembali ke bahagian atas halaman ini
9) Memasukkan Gambar Pada Halaman Anda
Bahagian ini memberikan anda kuasa untuk meletakkan gambar pada
halaman anda, dengan menggunakan penanda dan tambahannya: <img>,
src
Baiklah. Berikut merupakan kod yang digunakan untuk meletakkan gambar di
atas pada halaman ini.
<img src="sample.gif">
Tolong jelaskan! OK, saya akan mencuba
Butiran img memberitahu browser anda bahawa ia akan memperoleh
satu gambar yang kemudian perlu ditunjukkan pada halaman. Berikut merupakan
penanda imej/gambar <img>.
Butiran src="sample.gif" memberitahu browser
bahawa sumber (source) gambar itu ialah fail "sample.gif".
Untuk meletakkan gambar yang lain, nama fail dalam senarai fail akaun GeoCities anda dan nama dalam kod anda mesti benar-benar berkembar. - sample.gif berbeza daripada SaMpLe.gif
Jika anda mendapat gambar berikut "
"
yang sepatutnya gambar anda, pertamanya semak bagi memastikan anda telahpun
memuat turunkannya ke akaun GeoCities anda.
Jika ya, bandingkan nama fail gambar itu dalam senarai fail akaun anda
dengan yang ada dalam kod HTML anda (Kedua-duanya MESTI benar-benar
sama). Jika masih tiada kesilapan didapati, cuba muat turukan gambar itu
ke akaun anda sekali lagi. Adakalanya kemudahan pemuat turun tidak berfungsi
sebagaimana yang sepatutnya.
Sekarang, bagi meletakkan foto anda yang segak/cantik, anda menggunakan
kod ini.
<img src="Gambar Anda.Jenis Fail">. Ya, itu
sahaja!
Menggunakan Gambar Sebagai Penghubung
Gambar di sebelah kiri ini dapat dijadikan penghubung ke halaman yang lain
dengan menggunakan <img src="nama gambar"> tanpa menggunakan
teks.
<a href="http://....alamat selanjutnya"><img
src="nama gambar.gif"></a>
Jika anda berfikiran kreatif, dan anda memiliki program komputer yang diperlukan,
anda dapat membuat satu siri "Butang", kemudian hubungkan ke
mana-mana tempat yang anda ingin orang tujui.
Anda dapat membuat lebih lagi dengan gambar-gambar. Terdapat banyak sumber disenaraikan di Halaman Bantuan RainForest yang menerangkan dengan lebih lajut lagi.
Kembali ke bahagian atas halaman ini
10) Menggunakan Gambar Sebagai Latar Belakang
Sekarang anda boleh memasukkan berikut ke dalam penanda <body>
anda: BACKGROUND
Bagi menggunakan gambar sebagai latar belakang, selain daripada warna
biasa, akan menjadikan halaman anda lebih menarik. Ini dapat dihasilkan
dengan, sekali lagi, menambah butiran kepada penanda <body>, seperti
berikut
BACKGROUND="WarnaLatarBelakang"
- menetapkan gambar yang akan disusun berulang-ulang
di bawak teks anda.
<body bgcolor="WarnaLatarBelakang" background="GambarSebagaiLatarBelakang" link="WarnaPenghubung" vlink="WarnaPenghubungV" alink="WarnaPenghubungA;>
Kembali ke bahagian atas halaman ini
11) Hubungan Alamat E-mail Anda
Baiklah. Berikut merupakan merupakan kod untuk satu alamat e-mail
yang tidak wujud
<a href="mailto:duddles@oocities.com">duddles@oocities.com</a>
menghasilkan
duddles@oocities.com
Seperti penghubung yang lain, saya dapat menggunakan sebarang teks. - Kirimlah
Email Kepada Saya - Ulasan
Anda. Anda juga dapat membuat penghubung dengan gambar, yang diterangkan
di atas, dengan menggunakan <img src="YourMailImage> tanpa menggunakan
teks, seperti berikut (anda boleh menekan gambar ini)
Anda hanya perlu menyalin kod berikut,
<p><a href="mailto:AlamatEmailAnda">TeksAtauGambar</a></p>
dan masukkanlah teks atau gambar yang dikehendaki.
Satu lagi bahagian yang pendek. Kan lega? Kita hampir selesai.
Kembali ke bahagian atas halaman ini
12) Hubungan kepada GeoCities
Akhirnya, bagi mematuhi peraturan tuan halaman kami 
,
anda harus menyertakan kod berikut. Salinkan dan letakkan pada bahagian
bawah setiap halaman anda.
<hr><p align=center><b>This page hosted by </b><a
href="/">
<img src="/pictures/gc_icon.gif" align=bottom border=0></a>
<b> Get your own </b><a href="/"><b>Free
Home Page</b></a></p>
Kembali ke bahagian atas halaman ini
Akhirnya anda selesai!Whooo-iiiii
Tunggu sebentar, tenangkan diri
SIMPANKAN (SAVE) HALAMAN ITU
dan lihatnya melalui browser, pastikan
semua hubungan berfungsi, pastikan semua bahagian berjalan lancar seperti
yang diduga dan diinginkan. Ini penting kerana jika ia tidak berfungsi
dengan baik untuk anda, ia tidak berfungsi dengan baik untuk orang lain.
Ketika memuji diri sendiri atas hasil yang membanggakan, fikirlah tentang kami, yang tidak tahu siapa yang menggunakan panduan ini. Tolong isikan borang ini. Kami ingin mengetahui berapa bergunanya panduan ini pada pertimbangan anda.
Dengan panduan ini, dan sumber-sumber yang disenaraikan pada Halaman
Bantuan RainForest, anda patut dapat bergerak dam membuat halaman dengan
mudah.
Jika terdapat sebarang kemusykilan, isikan borang
ini, dan pastikan anda mengisi dan menyertakan alamat Email anda.
Jika anda mempunyai masalah dengan halaman bantuan yang lain, tentang halaman
mereka, kirimkanlah mesej kepada penghasil halaman itu.
Halaman ini telah dibuat untuk anda, pengguna baru, atau pengguna yang masih tidak yakin, bagi penggunaan bebas dan percuma sebagai Panduan On-line / Off-line menghasilkan halaman Web asas.
Ucapan BERSERONOKLAH ingin saya rakamkan untuk semua
pjmisme Letua Komuniti Rainforest & Vines
Diterjemahkan oleh:Ketua
Komuniti RainForest Benjinn
Tapak Web ini dituankan oleh:
Dapatkan Halaman Web Percuma
Anda
© Geocities RainForest & Ketua-ketua Komuniti RainForest/Vines, dan penduduk Komuniti GeoCities yang lain 1997