Cara Edit Daftar Isi Blog

Dari hasil survey yang saya lakukan sendiri, masih banyak sobat blogger yang kurang mengerti cara memasukkan daftar isi kedalam Menu Tab View dengan mengetikkan kata kunci CARA MEMASUKKAN DAFTAR ISI KE MENU BLOGSPOT. Jika anda termasuk salah satu dari sobat blogger blogspot yang sedang mencari tutorial cara mengedit dan memasukkan daftar isi blog pada menu tab view, berarti anda sedang membaca artikel yang anda cari hehe...

Pada artikel yang saya posting sebelumnya tentang cara membuat Menu Tab View Pada sidebar blog blogspot yaitu pada artikel INI, saya menuliskan kode seperti dibawah ini :

• 
  DAFTAR ISI MENU 1.1
  
• 
  DAFTAR ISI MENU 1.2
  
• 
  DAFTAR ISI MENU 1.3 dst
  

Untuk memasukkan Daftar isi blog ke dalam menu tab view, kode yang terlihat seperti gambar diatas yang harus diubah. Simak cara membingungkannya berikut ini :

Buka Artikel yang akan anda masukkan judulnya kedalam daftar isi Menu Tab View pada tab baru lalu Copy URLnya.

Buka kotak HTML/JavaScript Menu Tab View anda dengan mengklik EDIT jika anda mengubahnya dari halaman RANCANGAN.

atau anda juga bisa mengklik gambar TANG dan OBENG jika anda ingin mengeditnya langsung melalui blog anda.

Ganti tulisan DAFTAR ISI MENU 1.1 ( Kode yang berwarna merah ) pada contoh diatas dengan judul artikel blog anda.


Selanjutnya HIGHLIGHT kalimat judul blog anda seperti gambar disamping tulisan ini.

Klik Gambar Buat link yang terlihat pada gambar di samping tulisan ini :

Saat muncul jendela baru untuk memasukkan URL, hapus tulisan http:// lalu paste URL artikel anda yang telah anda copy sebelumnya pada langkan pertama lalu klik OK.

Judul blog yang anda highlight sebelumnya akan berubah menjadi seperti contoh dibawah ini :

Sebelum diberi link :

Cara Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew ( misalnya )

Setelah diberi link :

Cara Membuat Daftar Isi Blog dengan menggunakan Menu Tab VIew

Klik simpan pada kotak HTML/JavaScript Menu Tab View anda.


Untuk memasukkan daftar isi yang lain, lakukan hal yang sama pada kode DAFTAR ISI MENU 1.2 , 1.3, dan seterusnya.

Selesai.



Silahkan coba klik judul blog anda yang anda masukkan dalam Menu Tab View.
Jika anda ingin membuat linknya terbuka pada tab baru browser saat judul artikel dalam Menu Tab View di klik, silahkan baca panduan Complatenya di artikel INI

OK sob, semoga gampang dipahami. Kalau ada kelebihan mohon dimaafkan, kalau ada kekurangan sampaikan di kotak komentar......
Semoga hari anda menyenangkan dan Happy Blogging....

Cara Menghapus Link "Lihat profil lengkapku"

Apabila kita menambahkan gadget profil pada blog kita tentunya pada tampilan akan terlihat gambar profil blog kita berikut deskripsinya. dan juga terdapat link dibawahnya yang bertuliskan Lihat profil lengkapku, link ini akan menuju ke profil blog kita. jika anda ingin menghilangkan atau menghapus link lihat profil lengkapku tersebut caranya sangatlah mudah.

Cara menghapus atau menghilangkan link/teks tulisan Lihat profil lengkapku :

1. Setelah Login buka menu Tata Letak kemudian pilih Edit HTML.

2. klik kotak pada tulisan "expand widget template"

3. Cari kode yang berwarna merah dibawah ini di Template blog anda.


<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>

4. Jika anda sudah menemukan kode yang seperti di atas, silahkan di hapus/delete saja kode tersebut.


5. Klik tombol Simpan Template.

6. Selesai. Silahkan lihat hasilnya !

Cara Membuat Link

Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :

1. Login di blogger dengan ID anda
2. Klik menu Layout
3. Klik Page Elements
4. Klik Add a Page Element
5. Klik ADD TO BLOG pada menu Link List
6. Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog saya Adalah “ Link partner” atau silahkan terserah anda
7. Isi nomor link yang ingin anda tunjukan di blog anda pada form Number of Links to show in list, jika anda ingin membatasi jumlah link yang akan di tampilkan, jika anda tidak mau membatasi silahkan di kosongkan saja.
8. Pada form Sorting, silahkan anda pilih sort Alphabetically bila ingin link anda di urutkan berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila anda menginginkan Link yang anda buat di urutkan secara terbalik ( mulai dari Z --> A ). Bila anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat, silahkan pilih Don’t Sort
9. Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//kolom-tutorial.blogspot.com
10. Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name. contoh : Blog Tutorial.
11. Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas.
12. Klik SAVE CHANGES bila sudah selesai
13. Bila anda ingin menempatkan Link yang anda buat tadi, silahkan arahkan mouse anda ke kotak link yang baru anda buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang anda inginkan ( di drag & drop ) .
14. Klik SAVE. Selesai

Membuat link dari gambar atau image

Apabila anda mempunyai sebuah gambar, dan gambar tersebut ingin di jadikan sebuah link. Maka caranya seperti di bawah ini :

1. Upload gambar yang anda miliki ke hosting tempat menyimpan gambar, contoh http://www.photobucket.com.
2. Jika anda sudah mengupload gambar anda, maka gambar tersebut akan di beri alamat URL, copy alamat tersebut pada notepad. Sebagai contoh gambar chicklet blog tutorial di samping mempunyai alamat URL :
   
   http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif
   
   Nah jika anda ingin membuat gambar tersebut menjadi sebuah link, maka kode yang di tulis adalah :
   
   
   (kode dalam satu baris)
   
   jika ingin dalam window baru :
   
   
   (kode dalam satu baris)

Link berjudul

sumber : http://pemula-id.blogspot.com

Cara Cek Pagerank dan Ranking Blog anda

Cara Cek Pagerank blog, Pagerank Checker.
seberapa penting sih ranking google Pagerank buat anda??
Hmm,tentunya bagi para businessman dan Blogger Matre sangat penting sekali.
Terus, Pagerank itu apa??, kalo blum tau, silahkan baca disini Definisi Lengkap tentang Pagerank..
kalo sudah tau apa itu pagerank, lanjutkan baca artikel ini..
-Bagaimana cara cek Pagerank Google?
cara cek PR/pagerank web sangat mudah sekali..
1. Klik disini : Cek Pagerank Web

2. Setelah itu, di situs yg anda klik tadi, carilah menu Pagerank Checker, dan Klik.

3. Setelah itu, masukkan URL situs/blog anda.. jgn lupa menyertakan http didepan nama situs, contohnya : http://www.handipriyono.com

4. Lalu klik 'Submit'.
5.finish, Pagerank blog anda akan tampil .

Good Luck.

Trik Perpanjang Domain co.cc

Setelah pusing karena VCC belum ada, mau beli tapi penjualnya belom online, terpaksa saya cari-cari info sambil update beberapa artikel pada hari ini. Nah, sekarang saya mau share gimana cara memperpanjang domain di Co.Cc dengan gratis lagi alias gratis! Caranya yaitu login dulu di Co.cc (kalau mau memperpanjang berarti udah punya akun, tidak perlu menjelaskan dari Sign Up). Nah, kalau sudah klik Domain SettingKemudian klik renew pada domain yang expired. Nah, di sinilah letaknya, agar kita bisa memperpanjang domain dengan gratis. Pilih Personal dan cek di samping tulisan:

If the purpose is not personal, the domain will be transfered or deleted without notice.
By checking this box and clicking 'continue', you are agreeing to these terms.

Sesuai perintah, klik Continue untuk mensubmit. Oke, selesai deh, dan status domain Anda aktif kembali.

Oh iya, saya juga tidak tau loh itu aktif sampai kapan, masalahnya tidak ada info lagi akan expired tanggal berapa. Jadi, nikmatilah ^_^

dikutip dari http://www.abie-azki.co.cc/2010/03/trik-perpanjang-domain-cocc.html

CARA MEMBUAT BLOG/WEB/SITUS Full GRATIS….

Langsung saja…..!!!!! Tutorial Di bawah ini bisa saja di pakai untuk belajar cara membuat blog / website / situs

Pastikan Anda sudah mempunyai E-mail Bisa email dari yahoo, ymail, rocketmail, in.com, hotmail, gmail dll.. Hanya 3 langkah untuk CARA MEMBUAT BLOG/WEB/SITUS Full GRATIS….

1. Pendaftaran Domain
2. Pendaftaran Hosting
3. Install Script

Contoh :

• Buatsitus.co.cc
• Bob85.co.cc

Ingat tutorial ini FULL GRATIS tanpa di pungut biaya apapun…

1. Jika tertarik langsung saja daftar melalui link di bawah ini untuk daftar DOMAIN GRATIS :

Daftar Klik Segera Disini

2. Tuliskan Nama Domain yang anda sukai atau anda inginkan. misalnya : namaku, buatsitus dll. Masukan Tanpa www
Kemudian Klik Tombol : Check Availability
Setelah itu jika anda beruntung anda dapat memperoleh domain gratis seperti dibawah ini:

• www.bob85.co.cc is available
• One year domain registration for $0
• lanjutkan ke klik : Continue to registration

Tetapi jika yang muncul adalah  pemberitahuan seperti ini :

• www.membuatsitus.co.cc is available
• One year domain registration for $3
• Berarti kamu harus membayar $3, kalau memang kamu butuh nama domain tersebut, boleh kamu membelinya, menggunakan paypal atau credit card. Tapi jika tidak, ulangi masukan nama domain kamu dengan nama yang lain,
• Dengan Klik Getting A New Domain.

Tetapi jika muncul pemberitahuan seperti ini :

• www.buatsitus.co.cc is already registered
• hal ini menandakan bahwa domain tersebut sudah dimiliki orang lain, namun jangan khawatir silakan coba ulangi masukan nama domain kamu dengan nama domain yang lain. atau dengan memilih / Klik domain yang  disediakan di bawahnya seperti ilustrasi dibawah dengan harga FREE..

• Silakan coba berulang-ulang kali jika masih tetap belum menemukan domain kesukaan anda yang gratis. Sampai anda menemukan bahwa domain tersebut “ is available dan $0…” Untuk mempermudah anda mendapatkan domain gratis di co.cc kami menyediakan beberapa tips GRATIS, silakan baca tulisan di bawah ini.

3. Kalau sudah dapat is available dan $0… Klik Continue to Registration :

4. Silahkan klik : Create An Acount Now

5. Lengkapi Data-data anda sesuai dengan indentitas, Harus di isi dengan benar ya .

• Nama lengkap
• Alamat Email
• Tanggal Lahir
• Password

(Data-data diatas Harus Dicatat di Notepad atau Ms Word Karena nanti akan sangat diperlukan) Username Password Langkah 1

Account Information

(kalau yang di bawah ini boleh asal tapi harus di isi)

• Alamat rumah
• Kota
• Negara
• No Tlp
• Dll

6. Klik centang dan tombol CREATE AN ACCOUNT NOW

7. Masukan username dan password yg kamu buat kemudian masukan gambar tulisan seperti diatas..

SIGN IN >> ikuti sampai SETUP..

8. Setup lagi kemudian pilih nomor 1 (nameserver)

9. Masukan nameservernya dari Hostingforfree (karena nanti kita akan daftar hosting disini)

• ns1.hostingforfree.us
  
• ns2.hostingforfree.us

10. Kemudian klik SETUP, hati2 jangan salah masukan Nameserver ini karena salah satu huruf saja akan berakibat tidak akan ONLINE website kamu.

sumber : buatsitus.co.cc
selamat mencoba.

Bagaimana Cara Membuat artikel terkait atau related posts

Related Post atau Postingan Terkait itu sendiri banyak versi. Namun tujuannya tetap sama yakni menampilkan artikel terkait menurut kategorie atau label dari tulisan yang sedang kita baca. Dan ini biasanya sangat membantu jumlah PageView ( halaman yang di baca ) pada blog kita, Terutama bagi visitor yang ingin menggali lebih dalam artikel lainnya yang kita tulis.
Untuk tata letak bagusnya “ Related Post “ di simpan tepat bawah artikel, atau sedikit jarak dengan artikel.
* Perhatian
Dan perlu di ingat Post terkait ini akan berjalan atau terlihat jika artikel kita mempunyai label/kategorie/tag yang sama dari beberapa tulisan.
 

Menambah Script Artikel Terkait “ Related Post “

Berikut ini tahap-tahap untuk menambahkan script Arttikel Terkait ke dalam Template Blog.
1. Login/masuk  ke Blogger.com jika belum log in.
2. Pada halaman Dasboard masuk ke Layout ( tata-letak ), pilih tab Edit Html.
3. Kemudian tandai/centang kotak di samping tulisan “Expand Template Widget”
4. Setelah itu tempatkan script berikut ini di bawah tag ]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

5 Kemudian cari bagian ini, dan tambahkan seperti kode yang di beri warna

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span>

6. Sekarang cari kode baris post-footer berikut ini.

<div class='post-footer-line post-footer-line-3'>

kemudian masukan di bawahnya script ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-posts'>
<h4>Posts Terkait:</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Simpan Perubahan ( save template ).

Jika ingin memberi style atau gaya pada tampilan Widget Related Post ini. kita bisa menambahkan pada halaman Css-nya, script berikut, sebelum tag ]]></b:skin>

.related-posts h4{
margin: 0 0 0 10px;
padding: 0 0 0;
font-size: ukuran font;
color: #nilai warna;
}

Untuk List

.related-post ul{
margin: 0 0 0;
padding: 0 0 0;
list-style-type:none;}
.related-posts li{
margin: 0 0 0;
padding: 2px 0px 0px;
list-style-type:none;
font-size: ukuran font;}
.related-posts li a{color: #nilai warna}
.related-posts li a:hover{color: #nilai warna; text-decoration:none;}

Menyingkat Postingan Dengan "Read more"

Fungsi Read More adalah untuk meminimalisasi tampilan pada artikel/postingan yang terlihat pada halaman utama blog. cara membuatnya sangat mudah seperti pada artikel di bawah ini :

1. Cara Membuat Read More di Blog
2. Cara Membuat Read More + Judul Artikel

Namun pada fungsi read more kali ini sedikit berbeda dan lebih modern dengan memudahkan kita untuk tidak lagi membatasi artikel dengan panggilan:

............................................
....<span class="fullpost">
............................................
</span>

dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan yang ada di template posting. Untuk versi Read More Otomatis kali ini akan lebih mudah dan simple, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode seperti diatas. seperti yang di pakai oleh Blog Trik Tips Tutorial ini.

hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman kita sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.

1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan

2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.


Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

kode yang kita pelajari sebelumnya tampilannya seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More.. &#187;&#187;</a>
</b:if>

Mari Kita Lanjutkan Tutorial Cara Membuat Read More Otomatis.



Pertama, Kita langsung menuju ke kolom EDIT HTML, Cari kode

</head>

kemudian letakan script dibawah ini di atas atau dibawah kode </head>.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Kalau sudah jangan lupa disimpan terlebih dahulu.


Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Tulisan yang berwarna coklat itu menandakan read more + judul posting jika kita tidak menghendakinya tinggal di hapus.
dan tulisan right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)

silahkan disimpan dan lihat hasilnya :)

Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)

Semoga Berhasil.

PENULISAN KODE HTML

DASAR -DASAR PENULISAN KODE HTML

Bagi anda yang pengin belajar tentang penulisan kode HTML berikut adalah sedikit mengenai dasar - dasar cara penulisannya. Tulisan ini hanya memuat perintah kode HTML yang sangat sederhana. Tulisan ini mkungkin sangat cocok bagi mereka yang baru mengenal HTML.

Html singkatan dari HYPERTEXY MARKUP LANGUAGE, merupakan program penulisan informasi sebuah homepage. Dalam Tulisan ini akan coba saya perkenalkan dasar – dasar penulisan Kode HTML. Sebagai latihan Anda bisa menulis kode – kode HTML berikut ke Microsoft frontpage, atau program lainnya untuk mengetahui hasil setiap perintah kode HTML. (Untuk FrontPage setelah anda membuka halaman kosong sebagai latihan tulis kode HTML di Bagian menu “HTML” kemudian untuk melihat hasilnya silahkan tekan tombol “Preview” atau “Normal” yang ada disebelahnya. Saya menyarankan pakai FrontPage karena kebanyakan program tersebut sudah terinstal di komputer.

Sebelumnya ada saran dikit: cara yang baik dengan mempelajari bagaimana orang lain telah menuliskan kode-kode nya pada setiap halaman html adalah lakukan : klik menu "View" dan klik "Source". Cobalah lakukan langkah ini pada saat anda sedang membuka halaman html dokumen orang lain yang anda buka, download atau copy dari internet. Dengan langkah ini maka anda akan melihat sendiri di layar monitor komputer anda berbagai kode yang dituliskan pada halaman html tersebut.

1. Menulis judul pada halaman homepage

Setiap dokumen HTML sebuah homepage perlu diberi judul. Berikut adalah tampilan pada saat anda melakukan perintah penulisan judul atau title :

<title>Sinungku document</title>

Ubahlah teks "Sinungku document" dengan judul artikel anda. Penulisan judul biasanya dimulai dengan tanda tag <title> dan diakhiri dengan tanda tag </title>. Judul tulisan sebaiknya dituliskan pada awal dokumen anda.

2. Menambahkan sub-sub judul dan paragraphnya

Apabila anda telah biasa mempergunakan Microsoft Word, anda sudah biasa pula dengan model-model kodifikasi sub judul (heading) dengan tingkatan kepentingannya. Dalam bahasa HTML ada enam tingkat sub judul (heading). H1 adalah sub judul yang paling penting, H2 adalah sub judul yang agak kurang penting, begitu seterusnya sampai H6, yang paling sedikit kepentingannya..

Berikut adalah bagaimana caranya menambahkan sub judul (heading) :

<h1>Judul Penting</h1>

dan berikut adalah penulisan sub judul selanjutnya :

<h2>Judul Kurang Penting</h2>

Setiap paragraph yang anda tulis sebaiknya dimulai dengan sebuah kode tag <p>. Kode tag </p> hanya dipergunakan bila perlu. Kecuali pada penulisan sub judul biasanya diakhiri dengan kode tag </p>. Contoh :

<p>Paragraph Pertama.</p>

<p>Paragraph kedua.</p>

Untuk membuat lay-out tulisan kode yang dipakai :

<p align=”justify”>Teks anda</p>      : Rata kiri kanan

<p align=”right”>Teks anda</p>        : Rata Kanan                   

<p align=”center”>Teks anda</p>       : Rata Tengah

<p align=”left”>Teks anda</p>         : Rata Kiri

3. Menambahkan emphasis / Huruf Miring

Anda dapat menambahkan emphasis yang terdiri dari sebuah kata atau beberapa kata dengan menuliskan kode tag <em> pada awal emphasisnya dan diakhiri dengan kode tag </em>. Atau kode : <i> dan diakhiri </i> Contoh

Sinung putriku <em>pertama</em> yang cantik. Atau :

Sinung putri <i>pertama</i> dari Wahyo. 

4. Membuat Huruf Tebal / Bold

Contoh :  Sinung putri <b>pertama</b> dari Wahyo. 

5. Membuat Huruf Bergaris bawah

Contoh :  Sinung putri <u>pertama</u> dari Wahyo. 

6. Membuat Warna Huruf

Contoh :  Sinung putriku <font color=”#0000ff”>pertama</font>yang cantik. 

0000ff adalah kode warna huruf, anda bisa menggantinya dengan kode yang lain.

7. Membuat Warna Background Huruf

Contoh :  Sinung putriku <span style=”#0000ff”>pertama</span>yang cantik.

8. Membuat ukuran / size Huruf

Contoh :  Sinung putriku <font size=”3”>pertama</font>yang cantik. 

9. Mengubah Jenis Huruf

Contoh :  Sinung putriku <font face=”Times New Roman”>pertama</font>yang cantik. 

10. Menambahkan gambar (images)

Gambar (atau images) dapat ditambahkan kedalam halaman Web anda agar semakin informatif dan menolong penyampaian pesan anda. Cara sederhana untuk menambahkan sebuah gambar adalah dengan menggunakan kode tag <img>. Misalkan anda hendak menambahkan sebuah file gambar "sinungku.jpeg" dalam folder atau direktori yang sama dimana file dokumen HTML anda simpan. Gambar ini memiliki lebar 200 pixel dan tingginya 150 pixel.Maka menulisnya sebagai berikut :

<img src="sinungku.jpeg" width="200" height="150">

Lebar dan tinggi tidaklah terlalu penting akan tetapi ukuran gambar yang kecil akan menolong cepatnya tampilan halaman web anda diakses oleh orang lain di internet. Namun masih ada kekurangannya ! Orang lain yang tidak dapat melihat gambar anda, akan memerlukan deskripsi gambarnya. Anda dapat menambahkan deskripsinya dengan cara sebagai berikut :

<img src="sinungku.jpeg" width="200" height="150"

alt="Putriku yang Pertama">

Atribut alt dipergunakan untuk menuliskan perintah deskripsi singkat yaitu " Putriku yang Pertama ". Untuk gambar-gambar yang kompleks, anda akan membutuhkan deskripsi yang lebih banyak. Misalkan perintah ini akan dituliskan dalam file "sinungku.html", anda dapat menambahkan atribut deskripsi yang panjang seperti dalam contoh berikut :

<img src="sinungku.jpeg" width="200" height="150"

alt="Putriku yang Pertama " longdesc="sinungku.html">

Anda dapat membuat gambar dengan beberapa cara, dapat dengan mempergunakan kamera digital, scanner, atau membuat gambar dengan program pembuatan gambar seperti Photoshop, Corel, Microsoft Photoeditor, LViewpro dll. Kebanyakan program browser dapat membaca format gambar GIF dan JPEG, program browser yang terbaru juga dapat membaca format PNG. Untuk mencegah lambatnya gambar anda diakses di internet sebaiknya anda menerapkan ukuran file gambar yang tidak terlalu besar.

Secara umum, format JPEG adalah format terbaik untuk fotografi dan memperhalus berbagai jenis gambar, sedangkan format GIF dan PNG baik untuk grafis seperti bidang datar berwarna, garis dan teks. Ketiga bentuk format itu memiliki kemampuan "progressive rendering" yaitu kemampuan mengirimkan gambar kasarnya terlebih dahulu dan kemudian dilanjutkan dengan menambahkan detailnya sampai gambar tersebut tampil seluruhnya dengan baik.

11. Menambahkan link (tanda berhubungan) dengan halaman lain

Yang membuat Web demikian efektif adalah adanya kemampuan untuk membuat hubungan (link) dari satu halaman dengan halaman lainnya dan halaman lain yang berhubungan ini dapat dikerjakan cukup dengan satu kali klik saja.

Hubungan atau Link biasa ditulis dengan kode tag <a>. Misalkan sebuah hubungan atau link hendak dibuat pada file "sinungku.html":

This a link to <a href="Sinungku.html">Sinung's page</a>.

Teks antara kode tag <a> dengan kode tag </a> adalah keterangan tentang hubungan atau link yang akan dibuat. Umumnya keterangan ini diberi garis bawah. Warna teks dan garis bawah dibuat berwarna biru.

Untuk membuat link ke tempat Web yang lain anda perlu menambahkan alamat internet Web selengkapnya (biasanya disebu URL), contoh untuk link ke w3c anda perlu menuliskan :

This is a link to <a href="http://www.w3c.org/">W3C</a>.

Anda dapat juga membuat gambar logo memiliki link ke halaman lain. Contoh penulisan berikut memungkinkan gambar logo anda dapat berhubungan dengan home page.

<a href="/"><img src="logo.gif" alt="home page"></a>

12. Tiga macam daftar

Bahasa HTML memiliki kemampuan membuat tiga jenis daftar (list). Pertama daftar dengan kode bulat (bulleted list), biasa disebut unordered list. Penulisannya mempergunakan kode tag <ul> dan kode tag <li>, contoh :

<ul>

<li>Sinung putriku pertama</li>

<li>Wahyo adalah ayahnya</li>

<li>Dyah adalah ibunya</li>

</ul>

Perhatian, anda selalu harus menuliskan kode tag </ul> pada bagian akhir daftar anda, tetapi kode tag </li> bersifat tambahan atau bisa juga tidak dipergunakan. Jenis daftar kedua disebut daftar bernomor atau disebut juga ordered list. Ini dituliskan dengan kode tag <ol> dan kode tag <li>. Contoh :

<ol>

<li>Sinung putriku pertama</li>

<li>Lahir tanggal 18 Agustus</li>

<li>Hari lahir Jum`at jam 20.05 WIB</li>

</ol>

Seperti daftar pertama, anda selalu perlu mengakhiri daftar dengan kode tag </ol> , tetapi kode tag </li> pada bagian akhir adalah tambahan dan dapat dihilangkan.

Daftar ke tiga dan terakhir adalah daftar berdefinisi (definition list). Dengan daftar ini memungkinkan anda membuat daftar terminologi dan definisinya. Daftar ini ditulis dengan kode tag <dl> pada awal tulisan dan diakhiri dengan kode tag </dl>. Masing-masing terminologi dimulai dengan kode tag <dt> dan setiap definisi dimulai dengan kode tag <dd>. Contoh :

<dl>

<dt>the first term</dt>

<dd>its definition</dd>

<dt>the second term</dt>

<dd>its definition</dd>

<dt>the third term</dt>

<dd>its definition</dd>

</dl>

Kode tag </dt> dan </dd> adalah tambahan dan bisa tidak dipergunakan. Catatan, tiap daftar dapat disubkan antara satu daftar dengan daftar lainnya.Contoh :

<ol>

<li>the first list item</li>

<li>

the second list item

<ul>

<li>first nested item</li>

<li>second nested item</li>

</ul>

</li>

<li>the third list item</li>

</ol>

Anda bahkan dapat membuat paragraph dan headingnya dan lain-lainl.pada daftar yang lebih panjang.

Insya Alloh bersambung....