Merubah Tanggal Posting dalam Bentuk Icon Kalender

Membuat blog menjadi lebih menarik merupakan kesibukan besar blogger selain aktivitas posting yang sangat menyita waktu, energy dan terutama otak. Banyak cara dilakukan untuk membuat blog terlihat semakin indah dan menarik, dimana salah satunya adalah dengan membuat tanggal posting terlihat bagai sebuah kalender meja dalam ukuran mini (Lihat di sebelah kiri judul posting!). Membuat wajah baru seperti ini dapat dilakukan dengan beberapa cara, namun dari sekian banyak yang termudah adalah dengan cara yang akan tersampaikan di bawah. Tidak banyak kode dan javascript serta kode HTML yang harus digunakan. Pemasangan dan penyimpanannyapun sangatlah simple. Perubahan yang penting dan menjadi keharusan yang harus dilakukan, selain penambahan kode adalah perubahan format tanggal posting. Format tanggal posting ini sekaligus akan menjadi penentu muncul tidaknya desain tanggal posting dalam bentuk icon kalender yang kita buat. Agar tutorial ini lebih mudah dipahami, terlebih dahulu kita akan memulai dari cara pemasangan dan penyimpanan kode yang nantinya akan kita pergunakan.

Langkah untuk Merubah Tampilan Tanggal Posting

Cara Membuat Floating Image Link dengan kode CSS dan CSS3

Jika anda sering menjelajah blog, pasti pernah menjumpai gambar/image yang terpasang di pojok kanan-bawah atau kiri bawah halaman. Gambar-gambar tersebut bisa berupa gambar berekstensi .gif, .jpg atau .png. Beberapa yang lain juga memanfaatkan gambar animasi gif dan flash. Selain berfungsi menambah keindahan, pada gambar bisa ditambahkan sebuah link hingga ketika pengunjung meng-klik gambar tersebut maka dia akan dibawa ke halaman yang baru dari blog tersebut atau ke blog/web dengan alamat berbeda. Floating image yang di dalamnya berisikan link akan memberi manfaat lebih karena sebuah link penting bisa selalu "nongkrong" tepat di sebuah gambar yang terpajang di satu bagian blog yang mudah dan selalu terlihat oleh setiap pengunjung.

Penempatan di pojok kanan-bawah atau di kiri-bawah bertujuan supaya gambar gampang terlihat tidak terlalu mengganggu bagian blog yang lain. Anda bisa menggunakan gambar dengan ukuran "sesuka hati" sepanjang blog tetap nyaman untuk dinikmati pengunjung. Karena di dalamnya sudah diselipkan sebuah link, maka selanjutnya gambar ini kita sebut sebagai floating image link yang akan selalu terlihat sekalipun halaman digulung hingga ujung terbawah.

Kita bisa membuat floating image link dengan 3 macam cara:

• Hanya menggunakan xHTML.
• Menggunakan kode CSS dan xHTML.
• Memadukan kode3 CSS dan CSS3 serta xHTML.

Contoh Floating Image Link yang dibuat hanya menggunakan xHTML dapat anda lihat di halaman ini pada ujung/pojok kanan-bawah.

Jika anda ingin melihat bagaimana sebuah Floating Image Link yang dibangun dengan menggunakan kode CSS, CSS3 transformation dan CSS3 transition serta xHTMl, silahkan klik link DEMO di bawah ini. CSS3 transition dan transformation akan membuat efek yang memperindah tampilan Floating Image Link. Perlu menjadi catatan bahwa karena menggunakan kode CSS3, maka apabila anda ingin melihat bentuk efek dan tampilannya secara sempurna, anda harus menggunakan browser yang sudah mendukung CSS3 seperti Opera 1041 hingga Opera 1063, Google Chrome, Safari dan Mozilla Firefox 4.0 beta 1 hingga beta 6.

D E M O

Cara Menggunakan Onmouseover dan Onmouseout untuk Menciptakan Hover pada Image/gambar

Hal-hal yang teramat sederhana seringkali dibutuhkan pada saat-saat tertentu. Contohnya adalah membuat atau memunculkan hover sebuah gambar. Jika pada umumnya gambar yang berbeda harus dihasilkan melalui hover dengan menggunakan kode CSS yang disimpan di halaman edit HTML atau widget, dengan memanfaatkan onmouseover dan onmouseout, maka kode CSS tak diperlukan lagi. Cara seperti ini cukup praktis untuk digunakan di halaman posting atau di bagian yang lain seperti halnya di sidebar blog.

Dua buah gambar berbeda, melalui onmouseover dan onmouseout dapat dimunculkan pada satu tempat/ruang yang sama (seperti hover image). Ketika cursor disentuhkan pada gambar maka fungsi onmouseover bekerja sehingga gambar ke-2 terlihat. Saat cursor dijauhkan dari gambar (onmouseout), maka kembali gambar pertama terlihat. Dengan menggerakkan cursor di atas gambar di bawah ini, kemudian melepaskan/menjauhkan kembali cursor dari gambar, maka anda akan melihat bagaimana onmouseover dan onmouseout bekerja.



Fungsi seperti di samping biasanya bekerja dengan cara memanfaatkan hover yang dibangun dalam bentuk kode CSS dimana syntax-nya seperti contoh berikut:

Cara Membuat Menampilkan Widget Label/Categories

Memahami desain blog hingga penggunaan kode html desain blog merupakan sebuah kewajiban yang harus dilakukan blogger. Pada perkembangan selanjutnya sebuah blog akan cukup banyak memerlukan penambahan widget baru, kode html yang berupa xHTML, kode CSS dan javascript serta CSS3 guna peningkatan performa blog. Terlebih pada saat ini, setiap blogger dituntut untuk mampu mengembangkan diri membangun atau memodifikasi blog hingga halaman blog terlihat rapi dan cantik dengan harapan semakin membuat pengunjung betah berlama-lama membuka halaman demi halaman dan mengikuti setiap posting yang tersaji. Anda harus yakin bahwa penampilan yang lebih menarik dapat segera diciptakan dengan catatan bahwa anda bersungguh-sungguh dan telaten untuk mencoba mempelajari titik demi titik di mana sebuah blog terbangun.

Widget adalah satu dari sekian banyak bagian penyusun dan "kosmetik" bagi blog. Beberapa widget telah disediakan oleh blogger dan anda tinggal menampilkannya di halaman blog. Beberapa widget yang lain disediakan secara gratis ataupun berbayar oleh banyak situs yang tersebar memenuhi jagad maya. Salah satu widget yang telah disediakan blogger adalah widget Label atau Categories. Widget ini berfungsi untuk

Cara Membuat Elemen Baru di Bawah Footer & Outer-Wrapper

Mengapa sebuah elemen baru menjadi sangat penting untuk dibuat? Mengapa pula beberapa elemen ini juga harus dibuat di tempat-tempat tertentu yang sebelumnya tidak pernah tersediakan oleh pembuat desain blog? Sampai seberapa jauh fungsi dan kegunaannya?

Membuat sebuah atau beberapa buah elemen baru harus dilakukan oleh blogger di saat kebutuhan penempatan widget terus bertambah. Widget ini bisa berupa widget dalam bentuk jadi (yang disediakan beberapa situs tertentu termasuk blogger) ataupun widget baru yang kita buat sendiri menggunakan kode HTML yang di simpan melalui Add A Gadget. Mungkin ada suatu pertanyaan lagi? Mengapa tidak secara langsung saja kita masukkan atau simpan kode HTML baru tersebut di "halaman Edit HTML"?

Cara Membuat Drop Caps Otomatis di Posting Blog

Jika anda membuka sebuah blog dan "huruf pertama" pada posting atau di bagian yang lain selalu berupa huruf dengan ukuran yang berbeda (jauh lebih besar) dengan semua huruf di teks berikutnya, maka itulah yang kita sebut sebagai drop caps. Jadi intinya, dengan menggunakan fungsi drop caps ini maka di semua posting yang diterbitkan, huruf pertamanya akan kita buat dalam ukuran yang jauh lebih besar dari huruf selanjutnya. Cara membuatnya sangat praktis karena kita hanya perlu menambahkan kode CSS dan memanfaatkan tag DIV di pembuka posting. Jika anda ingin melihat seperti apa, sih, sebenarnya drop caps dan apakah drop caps ini akan membuat blog terlihat lebih bagus, silahkan klik link di bawah ini.
D E M O
Untuk membuat drop caps seperti yang telah anda ketahui atau lihat, sebenarnya ada dua cara yang dapat kita gunakan. yang pertama kita gunakan tag span dan yang ke dua kita gunakan tag DIV (sekalipun juga bisa kita gunakan tag p). Jika yang akan kita buat ini kita sebut sebagai Drop cpas otomatis, itu karena selain berfungsi menciptakan efek drop caps, tag DIV ini sekaligus kita manfaatkan sebagai pengatur posting dalam bentuk rata kiri atau rata kanan-kiri (text-align:left; atau text-align:justify;). Dengan kode baru yang kita gunakan, maka anda tidak perlu lagi menambahkan kode <div style="text-align:justify;"> untuk membuat posting rata kanan-kiri.

Kode CSS Drop Caps Otomatis

Cara Membuat Tag Cloud CSS3 dengan Efek pada Background & Color Link

Sebelum melangkah lebih jauh untuk membuat tag cloud CSS3 dengan background effect ini, terlebih dahulu kita akan mencoba memahami apa yang dimaksud tagcloud beserta fungsinya seta beberapa jenis tagcloud yang ada.

Tagcloud merupakan sebuah box yang berfungsi sebagai wadah bagi sekelompok link dalam sebuah web. Pada umumnya difungsikan sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. Variable HTML pembentuk tagcloud dapat menggunakan kode css dan xhtml saja, atau bisa terjadi juga memanfaatkan javascript untuk memperoleh efek-efek yang tidak memungkinkan bila hanya menggunakan kode css. Penggunaan kode yang berbeda ini tentunya juga mempunyai nilai plus dan minus karena disamping efek yang ditimbulkan berbeda, beban yang termuat dalam desain templatepun akan berbeda pula.

Penggunaan kode css (murni) sebagai pembentuk tagcloud mempunyai nilai lebih pada sisi ringannya beban muatan kode html yang ditanggung sebuah blog. Di luar itu dengan hadirnya CSS3, kini banyak efek indah bisa dibuat tanpa bantuan javascript. Jika kita membandingkan dengan tag cloud yang dibuat menggunakan javascrip, tagcloud CSS ini tak akan menjadi terlihat mengecewakan karena background efect dibuat dengan memanfaatkan CSS3 transition hingga ada semacam animasi/fade efect yang muncul saat tersentuh cursor. Untuk menjadi perhatian pula bahwa sekalipun javascript mampu menciptakan berbagai efek yang sangat indah, namun penggunaan script yang berlebihan akan sangat mempengaruhi beban dan loading. Bagi mereka yang mempunyai akses internet dengan kecepatan super, masalah loading tidaklah menjadi problem, tetapi karena akses terhadap sebuah blog bersifat umum (semua orang akan mengakses) dan banyak di antaranya yang loadingnya lambat, maka apabila sebuah blog terlalu berat maka sebagian dari mereka yang menggunakan modem dengan kecepatan lambat akan (malas membuka karena loading yang lama).

Dengan berbagai konskwensi seperti tersebut di atas, sekarang tinggal bergantung kepada pemilik blog. Tagcloud seperti apakah yang akan dimanfaatkan untuk melengkapi penampilan blognya?

Promosikan Blog Anda di "Tecnorati Baru"

TECHNORATI BARU

Setelah sekian lama nggak pernah sowan di Technorati, hari ini aku datang meminta maaf karena lupa berterima kasih dengan semua kebaikan yang telah diberikan selama berbulan-bulan. Orang memang biasa melupakan jasa yang telah disemaikan. Sifat yang manusiawi dan terkadang perlu di maklumi serta diberi maaf sebesar-besarnya (kecualui aku, tentunya !). Banyak yang telah berubah ternyata. Tidak hanya dandanannya yang terlihat lebih manis dan bersahabat, ternyata ada perubahan besar di layanan birokrasinya. Kalau dulu untuk sekedar minta tolong mempromosikan blog nggak perlu banyak thethek bengek, ternyata sekarang jauh lebih mremet dan butuh kesabaran extra. Terlalu banyak yang ngantri mungkin, ya? Atau karena nggak ada "markus" yang ikutan menjual jasa? He...he... Bener-bener bikin kepala panas, semangat melorot dan sedikit gondok setelah aku mencoba mempromosikan sebuah blog temanku yang mengeluh sampai meler-meler ingusnya! Aha... ini yang namanya tantangan. Ini yang namanya ujian mental! Dus..., akhirnya aku cuma bisa ngomong sama temanku. Sabar....sabar..., semua memang harus dihadapi dengan hati yang dingin. Nggak perlu kuatir. Segala sesuatu yang diupayakan dengan susah payah dan penuh kesabaran pasti akan mendatangkan berkah yang jauh lebih besar. Sambil menunggu proses penilaian dari Technorati, buatlah posting seperti biasanya. Syukur tantangan ini justru lebih memacu semangatmu. Jika dulu seminggu hanya satu posting, sekarang buatlah menjadi 3 posting. Percayalah Technorati hanya mau melihat kesungguhanmu nge-blog. Temanku hanya manggut-manggut dengan muka masam. Masih dongkol, kali.

Meskipun cara untuk melakukan promosi di Technorati telah aku posting dengan cukup detail (bisa kamu buka di sini.), dengan menyertakan beberapa gambar untuk memvisualisasikan prosedur yang memang cukup sulit, karena banyak hal yang sudah berubah maka kita akan pelajari bersama langkah-langkah yang mesti dilakukan.

Langkah melakukan promosi blog di "Technorati baru" Tahap-1 :

• Sign Up
  Gunakan alamat ini untuk memulai promosi http://technorati.com/account/signup/. Atau kamu bisa juga "KLIK" di sini.


• Real first name :
  Isi dengan nama depan kamu seperti di email.


• Real last name :
  Isi dengan nama belakang kamu seperti di email.


• Member name :
  Tulis nama untuk member (User Name).


• Email address :
  Tulis email kamu di box yang telah disediakan. Tulis kembali di box bawahnya (Comfirm Email).


• Password
  Tulis Password dan ulangi kembali untuk box bawahnya.


• Character
  Tuliskan karakter yang telah disediakan pada box di sebelah kanannya.


• Agreement
  Beri persetujuan dengan memberi tanda pada box kecil tanda persetujuan di sebelahnya.


• Join
  KLIK "KLIK button Join".

Tahap-2

• Account Activation
  Buka email kamu dan "KLIK" link aktivasi akun dari Technorati dibawah teks :
  You're almost ready to start using Technorati! To verify your email address and get started, please go to:
  


• Account Activated!
  Akun telah anda telah di aktifkan. oleh Technorati. Segera "KLIK" Sign in.


• Member Login!
  Tulis Member Name (User Name) kamu kemudian KLIK button Login.


• My Profile
  Perhatikan ujung atas sebelah kanan. Di sebelah kiri Image Profile terdapat Member Name (User Name). Klik Namamu tersebut untuk masuk ke akun kamu (My Profile).


• Starting Claim
  Di ujung terbawah halaman My Profile terdapat box dengan kalimat Start a blog Claim - ..... - claim. Ketikkan URL blog yang akan kamu klaimkan
  Contoh : http://bloggerstuars.blogspot.com


• Claim a New Blog
  Terlihat sebuah halaman baru dengan judul seperti di atas. Beberapa hal yang berkaitan dengan identitas dan deskripsi blog yang kamu klaimkan harus di sampaikan di halaman ini.
  
  • Blog title :
    Tulis dengan jelas nama blog kamu.
  
  
  • URL :
    URL blog ditulis seperti : http://bloggerstars.blogspot.com
  
  
  • URL Feed :
    URL Feed untuk blogger bisa menggunakan :
    1. URL blog kamu/feeds/posts/default
    2. URL blog kamu/feeds/posts/default
    3. Kalau dari Feedburner misalnya : http://feeds.feedburner.com/blogspot/....
  
  
  • Linking Blog :
    Tulis URL blog yang ngelink ke blog kamu. Atau kamu tuliskan URL blog-blog yang kamu punya.
  
  
  • Site Description :
    Tulis dalam bahasa Inggris seputar blog yang kamu ingin klaimkan.
  
  
  • Site Categories :
    Pilih diantara kategori yang tersedia dengan KLIK box yang tersedia (max=3).
  
  
  • Site Tags :
    Kamu tulis keyword (kata yang paling sering atau penting digunakan ketika posting dalam setiap kolom-kolom kecil yang disediakan cukup banyak tersebut.
  
  
  • Proceed to the Next Step
    KLIK button tersebut.


• Lihat Email
  Tunggu hingga proses di atas selesai kemudian buka email kamu. Ambil Claim Token yang bentuknya seperti ini : FEH2H4GUJKLD (hanya contoh!). Terbitkan di ruang posting blog yang kamu klaimkan. Nggak usah disertakan judul atau apapun karena hanya digunakan sebagai bukti oleh Technorati bahwa kamu pemilik blog yang sedang di daftarkan untuk promosi sekaligus memastikan kamu penulis dari blog tersebut.


• Check Claim
  Kembali buka halaman My Profile. Langsung ke bagian terbawah. "KLIK" Check Claim box.


• Claim Status
  Ini hanyalah verifikasi ulang yang dilakukan Technorati. "KLIK" Verify Claim Token.


• Periksa Email
  Kembali kamu harus membuka email kamu. Perhatikan email yang kamu terima dari Technorati. Thank you for submitting your blog claim on Technorati. We have successfully crawled your blog and found the claim token, and your claim is now awaiting review.


• Hapus Claim Token
  Hapus Claim Token dari halaman posting anda karena telah terdeteksi oleh Technorati.


• Harus Menunggu ?
  Buka Halaman My Profile di Technorati. Jika blog anda sudah ditampilkan, berati ada dua kemungkinan.
  • Proses registrasi langsung bisa diselesaikan.
    Bila proses registrasi kamu berjalan dengan sangat bagus tanpa diharuskan menunggu penilaian Technorati, ikuti langkah ke-3!
  • Masih harus menunggu penilaian.
    Tetaplah rajin membuat posting dan cobalah untuk selalu melakukan cek ulang di Technorati dengan membuka halaman My Profile atau anda coba cek email anda.

Tahap ke-3 :

• Favourite Buttons
  Kamu akan dipersilahkan memilih beberapa buah button favourite yang berisi link ke Technotrati. Pilih yang kamu suka, copy kode htmlnya dan simpan di template kamu. Terserah mau kasih di sidebar atau di mana yang jelas menggunakan penambahan widget.


• Save Blog Info
  "KLIK" dan proses klaim blog anda selesai. Silahkan posting serutin mungkin untuk menggapai popularitas. Nantikan rejeki yang akan mengalir ke kantong kamu. dan jangan lupa :

.

Pesan Eyang Kakung:

Berbagilah kamu senantiasa dalam keadaan susah dan senang ! Maksud eyang kakung tentunya bagi-bagi du'it

Creating a Simple Tag Cloud Using Background Effects

Sebelum melangkah lebih jauh untuk membuat tagcloud dengan memanfaatkan efek background, terlebih dahulu kita akan mencoba memahami apa yang dimaksud tagcloud beserta fungsinya seta beberapa jenis tagcloud yang ada.

Tagcloud merupakan sebuah box yang berfungsi sebagai wadah bagi sekelompok link dalam sebuah web. Pada umumnya difungsikan sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. Variable HTML pembentuk tagcloud dapat menggunakan kode css dan xhtml saja, atau bisa terjadi juga memanfaatkan javascript untuk memperoleh efek-efek yang tidak memungkinkan bila hanya menggunakan kode css. Penggunaan kode yang berbeda ini tentunya juga mempunyai nilai plus dan minus karena disamping efek yang ditimbulkan berbeda, beban yang termuat dalam desain templatepun akan berbeda pula.

Penggunaan kode css (murni) sebagai pembentuk tagcloud mempunyai nilai lebih pada sisi ringannya beban muatan kode html yang ditanggung sebuah blog, sehingga relatif tidak mempengaruhi kecepatan loading. Meskipun penggunaan javascript mampu menciptakan berbagai efek yang memperindah penampilan sebuah blog, namun penggunaan script yang berlebihan akan sangat mempengaruhi beban dan loading. Bagi mereka yang mempunyai akses internet dengan kecepatan super, masalah loading tidaklah menjadi problem, tetapi karena akses terhadap sebuah blog bersifat umum (semua orang akan mengakses), maka apabila sebuah blog terlalu berat maka blog tersebut mejadi jarang di buka orang (malas karena nunggunya lama).

Dengan berbagai konskwensi seperti tersebut di atas, sekarang tinggal bergantung kepada pemilik blog. Tagcloud seperti apakah yang akan dimanfaatkan untuk melengkapi penampilan blognya?

Cara Membuat CSS Tacloud menggunakan efek background :

• Login ke Blogger (Login to Blogger).
• Dasbor (Dasboard).
• KLIK Design (Rancangan).
• KLIK Edit HTML.
• Back-up Template : Amankan template dengan cara :
  - KLIK Download Template Lengkap (Download Full Template).
  - Simpan Template di folder PC.
• Cari KODE ]]></b:skin> .
• Copy paste KODE CSS berikut dan letakkan di atas kode ]]></b:skin> .
• KLIK Simpan Template (SAVE Template).

KODE CSS :

.tagcloud {
       width:300px;
       font-family:Times;
       padding:15px 8px;
       border:solid 1px #eee; 
       background:#fff;
}
.tcloud { 
       padding:3px 6px;
       text-decoration:none;
}
.tcloud:link {
       color:#003EBA;
}
.tcloud:visited {
       color:#ff900;
}
.tcloud:hover {
       color:#ffffff;
       background:#003EBA;
}
.tcloud:active {
       color:#ffffff;
       background:#5D7CBA;
}

xHTML

Copy xHTML di bawah ini dan simpan melalui Add a Gadget (tambah Gadget) di Elemen Laman.

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

Keterangan :

1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html
3. Nama Link-1 s/d Link-10 = Judul Posting.
4. Title Link : berisikan penjelasan singkat Nama Link.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• gubhug reot
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin

Cara Posting Kode HTML

Posting kode html sebenarnya hampir sama dengan posting dalam bentuk teks yang lain. Sedikit perbedaan hanya terjadi pada beberapa kode tertentu seperti tanda lebih kecil dari (<) atau lebih besar dari (>), tanda petik (') atau tanda petik dua ("). Meskipun di luar kode-kode tersebut , masih ada beberapa kode lain yang harus dituliskan secara khusus, tetapi yang paling sering digunakan adalah 4 (empat) kode yang tertulis di atas. Itupun, untuk kode tanda petik dan tanda petik dua bisa dituliskan seperti apa adanya.

A. Tanda < dan tanda > digunakan pada kode html seperti :

<script type="text/javascript">
.....
.....
.....
</script>

atau contoh yang lain misalnya :

<style type="text/css">
.....
.....
.....
</style>

Juga pada KODE seperti :

1. <link href="http://....../...../font.css rel="stylesheet" type="text/css" />

2. < script src="http://...../...../jquery.1.3.2.min.js" type="text/javascript">
3. <img src="http://...../...../...../gadis.jpg" width="200" height="300" />

4. <a href="http://bloggerstuars.blogspot.com>bloggerstars-1</a>

B. Cara menuliskan tanda < dan > dalam kode html :

1. tanda < dituliskan sebagai &lt; .

Contoh  : <script .....

ditulis : &lt;script .....

2. Tanda > dituliskan sebagai &gt;

Contoh  : ..../gadis.jpg/>

ditulis : ..../gadis.jpg/&gt;

C. Tanda (') dan (") mempunyai fungsi sama dan jika ingin menuliskan dalam bentuk khusus silahkan dituliskan sebagai &quot; .