Cara Membuat Klik Link Untuk Membuka Jendela Baru

Ketika anda membuat sebuah link dalam posting anda yang menghubungkan alamat web yang bukan merupakan bagian halamandari web anda, maka bukalah  link tersebut tampil dalam jendela baru (open link in new window) agar halaman web anda yang sedang dibuka tidak hilang sehingga halaman web anda tetap terbuka di jendela asal, hal ini mencegah agar anda tidak kehilangan pengunjung anda .

Kode html untuk membuka halaman atau jendela baru pada web adalah sebagai berikut :

<A HREF="http://www.domain anda.com/" TARGET="_blank">Your Link</a>

Ganti teks berwarna merah dengan nama url anda.

Membuat Border Cantik Dengan Tag HTML

Blog yang berpenampilan rapi dan menarik tentu menjadi idaman para blogger, nilai estetika dari sebuah blog janganlah dianggap remeh, selain content yang berbobot penampilan juga harus representatif.

Memang semua itu tak lepas dari selera dari setiap orang, tetapi paling tidak jika sebuah blog tertata dengan rapi, baik itu menu navigasinya, image yang ditampilkan, animasi-animasi yang menarik dan lain sebagainya, akan menimbulkan kesan “plus” pada pandangan pertama awal jumpa, sehingga pengunjung tidak akan cepat bosan dan jenuh untuk membolak-balik isi  halaman blog anda.

Banyak yang dapat anda lakukan untuk memperindah tampilan blog anda, salah satunya adalah dengan menambahkan border. Ada beberapa border pada kode tag HTML yang dapat anda kreasikan kedalam blog.

Solid Border

Contoh tag Solid Border : 

---

<div style="width:200px;height:60px;border:1px solid blue;">

Contoh Solid Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Solid Border.

Dotted Border

Contoh tag Dotted Border : 

---

<div style="width:200px;height:60px;border:2px dotted blue;">

Contoh Dotted Border.

</div>

---

Hasilnya seperti dibawah ini :

Contoh Dotted Border.

Dashed Border

Contoh tag Dashed Border : 

---

<div style="width:200px;height:60px;border:2px dashed blue;">

Contoh Dashed Border.

</div> 

---

Hasilnya seperti dibawah ini : 

Contoh Dashed Border.

Outset Border

Contoh tag Outset Border : 

---

<div style="width:200px;height:60px;border:2px outset blue;">

Contoh Outset Border.

</div> 

---

Hasilnya seperti dibawah ini : 

Contoh Outset Border.

Inset Border

Contoh tag Inset Border : 

---

<div style="width:200px;height:60px;border:2px inset blue;">

Contoh Inset Border.

</div> 

---

Hasilnya seperti dibawah ini : 

Contoh Inset Border.

Grooved Border

Contoh tag Grooved Border : 

---

<div style="width:200px;height:60px;border:2px groove blue;">

Contoh Grooved Border.

</div> 

---

Hasilnya seperti dibawah ini : 

Contoh Grooved Border.

Double Border

Contoh tag Double Border : 

---

<div style="width:200px;height:60px;border:2px double blue;">

Contoh Double Border.

</div> 

---

Hasilnya seperti dibawah ini : 

Contoh Double Border.

Ridget Border

Contoh tag Ridged Border : 

---

<div style="width:200px;height:60px;border:2px ridge blue;">

Contoh Ridged Border.

</div> 

---

Hasilnya seperti dibawah ini : 

Contoh Ridged Border.

Mixed Border

Contoh tag Mixed Border : 

---

<div style="width:200px;height:60px;border-width:5px;border-color:black;border-style:dotted dashed solid double;">
Create borders for any HTML element.
</div>

---

Hasilnya seperti dibawah ini : 

Contoh Mixed Border.

Silahkan anda coba dengan merubah width, border-color, boder-style, height dan lain sebagainya untuk membandingkan hasilnya, sambil belajar memahami kode-kode tag HTML ini, selamat mencoba.

Membuat Daftar atau List Menggunakan Kode HTML

Membuat Daftar atau List Menggunakan Kode HTML Didalam kegiatan ber-blogging pasti tak luput dari penyajian daftar atau list dari suatu materi posting, misalnya membuat daftar blogroll, daftar lagu, daftar backlink dan lain sebagainya. Di posting kali ini saya ingin berbagi tentang dasar membuat suatu daftar atau list, perhatikan contoh dibawah ini :

Daftar lagu Indonesia terpopuler minggu ini : 

• Afgan - Panah Asmara
• D'Bagindas - Maafkan Aku
• Viera - Kesepian
• Anji - Berhenti Di Kamu

Perhatikan daftar lagu diatas, lingkaran (butir) sebelum teks dibentuk menggunakan tag <li> - </li>, daftar diawali dengan tag <ul> dan diakhiri dengan </ul>(Unordered List), lengkapnya cara penulisan untuk menghasilkan tampilan seperti contoh diatas adalah sebagai berikut :

<b>Daftar lagu Indonesia terpopuler minggu ini :</b>
<ul>
<li>Afgan - Panah Asmara</li>
<li>D'Bagindas - Maafkan Aku</li>
<li>Viera - Kesepian</li>
<li>Anji - Berhenti Di Kamu</li>
</ul>

Huruf tebal pada judul dirangkai menggunakan tag <b> dan </b>, dapat juga menggunakan <strong> dan </srong>. Berikut contoh lain dari sebuah daftar yang dibentuk dari kode HTML :

Daftar lagu Indonesia terpopuler minggu ini :

1.     Afgan – Panah Asmara
2.     D’Bagindas – Maafkan Aku
3.     Viera – Kesepian
4.     Anji – Berhenti Di Kamu

Untuk menampilkan daftar dengan urutan nomor sebelum teks adalah dengan menggunakan tag <ol> dan </ol> ( Ordered List ). Perbedaan antara <ul> - </ul>dengan <ol> - </ol> adalah, Ordered List akan menampilkan nomor urut sebelum daftar atau teks, sedangkan Unordered List tidak menampilkan nomor urut didepannya. Mari kita buat tag HTML yang menampilkan daftar seperti terlihat pada contoh ke dua diatas . 

<strong>Daftar lagu Indonesia terpopuler minggu ini :</strong>
<ol>
<li>Afgan - Panah Asmara</li>
<li>D'Bagindas - Maafkan Aku</li>
<li>Viera - Kesepian</li>
<li>Anji - Berhenti Di Kamu</li>
</ol>

Judul “Daftar lagu Indonesia terpopuler minggu ini” ini diapit oleh tag <strong> dan</strong>, coba anda ganti dengan <b> - </b> dan lihat perbedaannya, perhatikan juga jika <b> - </b> atau </strong> - </strong> dihilangkan, apa yang terjadi?, silahkan anda coba sendiri.

Cara Membuat Link HTML

Kita sering menemukan atau melihat link ketika kita berkunjung pada sebuah situs atau blog, link bisa berbentuk alamat url utuh contoh :"http://blogbudaqdegil.blogspot.com" atau berbentuk teks, yang mana jika teks ini di klik maka akan mengarah ke sebuah situs.

Bagaimana cara membuatnya? Jika anda ingin tau silahkan simak uraian dibawah ini. 

Tag HTML yang digunakan untuk membuat link adalah  <a> dan </a>.
 

<a> Memberitahu dimana link harus mulai dan </a> menunjukkandimana link harus berakhir (penutup).
 

Teks apapun yang diapit atau yang berada diantara kedua tag ini akan membentuk sebuah link.

Target dari link adalah alamat url dari sebuah site yang harus ditambahkan diantara tag <a> dan </a> dengan menggunakan href, sebagai contoh kita akan membuat teks link dengan menggunakan alamat url saya ini= "http://www.iwan-creative.blogspot.com" .

Contoh dibawah menunjukkan cara penulisan lengkap bagaimana membuat teks  ("test link") dengan link yang mengarah ke sebuah site.

<a href ="http://www.iwan-creative.blogspot.com">test link</a>

Maka akan menghasilkan tampilan :  test link

Semoga bermanfaat.

Belajar Dasar HTML Merancang Web atau Blog

Seperti yang sudah anda ketahui pada posting saya terdahulu tentang Mengenal Hypertext Markup Language (HTML),  secara ringkas HTML adalah kode yang terdiri dari rangkaian tag untuk menampilkan suatu visual pada halaman Web atau World Web Wide (WWW). Kode HTML ini memungkinkan anda untuk membuat halaman web dan menempatkan  apapun yang anda suka.

Baiklah, mari kita langsung ke intinya. Disini anda akan mempelajari sebenarnya betapa mudahnya untuk membuat sebuah web atau blog. Bahkan pada saat anda selesai membaca posting saya ini , saya yakin anda akan bisa membuat web anda sendiri.
Semudah itukah…? Jawabynya iyaa!, jika anda tekun dan selalu bersemangat, OK!.

Langkah-langkah didalam menyusun sebuah web/blog umumnya adalah sebagai berikut : 

1.    Membuat dan menyimpan file HTML

2.    Masukkan kode HTML

3.    Lihat hasilnya di browser (preview)

4.    Ulangi langkah 3 dan 4 jika perlu

Baiklah, mari kita bahas langkah-langkah diatas dengan lebih rinci satu-persatu.

1. Membuat dan menyimpan file HTML

Sebuah file HTML adalah sebuah file teks yang disimpan dalam bentuk  ekstensi “html”.
Jalankan program Notepad editor pada komputer jika anda menggunakan OS Windows, TextEdit jika anda menggunakan Mac. Anda juga dapat  menggunakan pengolah teks HTML khusus seperti Dynamic HTML Editor, Notepad++ dan lain sebagainya.

2. Masukkan kode HTML

-  Buat sebuah file baru pada Notepad anda
-  Simpan file dengan nama  “web pertamaku.html” (tanpa tanda kutip).

Ketik atau copy paste kode HTML berikut  ini ke Notepad anda :

---

<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

          <title> Contoh Halaman Web Sederhana </title>

    </Head>

          <body> <p> INILAH WEB PERTAMAKU…! </p></Body>

</Html>

---

3. Lihat hasilnya di web browser (Preview)

Lihat hasilnya di web browser anda, tau caranya?, jalankan web browser anda (Firefox atau Internet Explorer), pada menu klik File -> Open File , lalu arahkan ke direktori dimana anda menyimpan file “web pertamaku.html” tadi, dan lihat hasilnya. 

---- Cara lain ----

Arahkan ke direktori dimana anda menyimpan file “web pertamaku.html” menggunakan windows explorer, lalu klik 2 kali pada  file tersebut.

4. Ulangi langkah 3 dan 4 jika perlu

Anda bakalan sering melakukan hal diatas, meng-edit kode html anda kemudian melihatnya lagi di web browser, akan sangat sering, begitu terus berulan-ulang, karena saya yakin anda ingin memastikan hasil dari kreasi anda terlihat apik dan optimal. 
Tapi jangan khawatir , hal itu wajar, suatu saat anda akan mengerti mengapa saya berkata demikian.

Penjelasan sederhana dari kode-kode dan tag diatas

OK, sebelum kita lanjutkan, saya akan menjelaskan secara sederhana apa arti dari kode-kode atau tag html diatas.

Sekelompok kode tag HTML ini memerintahkan browser anda apa dan dimana akan menampilkan suatu konten. 

Anda juga mungkin sudah mengamati  bahwa pada setiap tag "pembuka" selalu diakhiri dengan tag "penutup", seperti <html> - </html>, <title> -</title>, <head> - </head>, <body> - </body>, perhatikan juga  konten atau materi yang ingin ditampilkan selalu diapit di antaranya. Sebagian besar  tag HTML harus dibentuk dengan tag pembuka dan penutup.

Sebuah halaman web pada umumnya minimal harus berisikan kode tag seperti pada contoh diatas. 

Perhatikan  tag :

---

 <head>
              <title> Contoh Halaman Web Sederhana </title>
    </Head>

---

Tag “<title> Contoh Halaman Web Sederhana </title>“  ini ditampilkan pada Judul Tab dan Judul Halaman dari web browser (perhatikan gambar). 

Sedangkan tag “<body> <p> INILAH WEB PERTAMAKU…! </p></body>” tampil di halaman utama (body). 

Selamat mencoba.

Mengenal Hypertext Markup Language (HTML)

HTML (Hypertext Markup Language) adalah kumpulan simbolmarkup atau kode yang dimasukkan ke dalam sebuah file yang dimaksudkanuntuk menampilkan suatu visual padahalaman Web atau World Web Wide (WWW). Kode HTML memerintahkan browser Webbagaimana menampilkan suatu format pada halaman web, seperti kata-kata (teks),  serta gambar atau grafik. Setiap kode HTML disebut elemen, sebuah dokumen HTML berisi elemen-elemen kode HTML yang disebutTag.

HTML adalah Rekomendasi resmi dari World Wide Web Consortium (W3C)dan umumnya digunakan oleh mesin browser dunia yang terkenal sepertiMicrosoft Internet Explorer, Netscape Navigator dan Mozilla Firefox yangjuga menyediakan beberapa kode non-standar tambahan. Versi saat inidari HTML adalah HTML 4.0.

Dalam kondisi tertentu didalam penulisan tag harus ditulis berpasangan, dan untuk beberapa efek khusus harus diberi awalan dan akhiran tag.

Contoh tag : 

<HTML>
.......Kode program.
</HTML>

Sebuah dokumen HTML terdiri dari 2 bagian yaitu head (kepala) dan body(badan). Bagian head ditandai dengan tag <HEAD> sedangkan bagian body ditandai dengan tag <BODY>. Bagian head digunakan untuk menyimpan informasi tentang dokumen tersebut , misalnya judul, nama penulis (author), komentar-komentar ,dan lain-lain. Sedangkan bagian body digunakan untuk memaparkan isi utama dari dokumen (artikel) dari suatu web.

Contoh tag membuat web sederhana :

<HTML>
  <HEAD><H1>Contoh Web Sederhana</H1>

  </HEAD>
     <BODY>
      Mengenal Hypertext Markup Language (HTML)
     </BODY>
</HTML>
 

Tampilan kode html diatas akan terlihat seperti dibawah ini:

Contoh Web Sederhana

Mengenal Hypertext Markup Language (HTML)