Panduan HTML On-line / Off-line

Panduan HTML untuk mereka yang menggunakan GeoCities Advanced Editor, atau untuk menghasilkan halaman tanpa menggunakan masa Internet (Off-line)
(Bagi penggunaan off-line, gunakan notepad, wordpad, program editor teks yang lain atau Editor Netscape, versi 3.0 ke atas)

1) Memulakan Halaman Anda

2) Warna Latar Belakang

3) Memasukkan Hasil Tulisan Anda

4) Menukarkan Warna Huruf-huruf

5) Huruf-huruf Condong dan Huruf-huruf Tebal

6) Menukarkan Saiz Tajuk

7) Membuat Hubungan Web (links) Anda

8) Menetapkan warna penghubung

9) Memasukkan Gambar Pada Halaman Anda

10) Meletakkan Gambar Sebagai Latar Belakang

11) Menyertakan E-mail Anda

12) Hubungan kepada GeoCities

Tolong isi borang ini bagi mencadangkan bagaimana panduan ini dapat diperbaiki lagi, untuk penggunaan anda, yang baru mengenali HTML


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 index.html

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.

<h1>Tajuk Anda</h1>

<h2>Tajuk Anda</h2>

<h3>Tajuk Anda</h3>

<h4>Tajuk Anda</h4>

<h5>Tajuk Anda</h5>
<h6>Tajuk Anda</h6>

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