0 Membuat List atau Daftar dengan HTML

By Unknown | At 22.50 | Label : Belajar HTML | 0 Comments

Membuat List atau Daftar dengan HTML

Membuat List HTML

Seringkali kita melihat daftar yang misalnya seperti ini: Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

• Pangeran Diponegoro
• Perang Padri
• Teuku Umar
• Wolter Monginsidi
• Dan Lain-lainnya

Atau yang seperti ini:
Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1. Pangeran Diponegoro
2. Perang Padri
3. Teuku Umar
4. Wolter Monginsidi
5. Dan Lain-lainnya

Nah, untuk membuat list atau daftar yang seperti ini dengan html caranya adalah dengan tag <ul></ul> yang disebut Unordered List atau dengan tag <ol></ol> yaitu Ordered List.
Beda antara <ol></ol> dan <ul></ul> adalah bahwa Ordered List <ol></ol> menghasilkan daftar dengan nomor urut 1,2,3 dst sedangkan Unordered List <ul></ul> hasilnya tanpa nomor.
Sekarang kita membuat list atau daftar dengan tag <ul></ul> supaya memperoleh hasil seperti diatas.
<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>
<ul>
<li>Pangeran Diponegoro</li>
<li>Perang Padri</li>
<li>Teuku Umar</li>
<li>Wolter Monginsidi </li>
<li>Dan Lain-lainnya</li>
</ul>
Hasilnya adalah seperti ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

• Pangeran Diponegoro
• Perang Padri
• Teuku Umar
• Wolter Monginsidi
• Dan Lain-lainnya

Supaya kita tahu perbedaannya, maka tag <ul></ul> kita ganti dengan tag <ol></ol>
kita lihat kode htmlnya sekarang menjadi seperti ini:
<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>
<ol>
<li>Pangeran Diponegoro</li>
<li>Perang Padri</li>
<li>Teuku Umar</li>
<li>Wolter Monginsidi </li>
<li>Dan Lain-lainnya</li>
</ol>
Lihatlah…… Sekarang hasilnya adalah seperti dibawah ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1. Pangeran Diponegoro
2. Perang Padri
3. Teuku Umar
4. Wolter Monginsidi
5. Dan Lain-lainnya

Kelihatan bedanya, kan?
Catatan:
Tag <strong> </strong> adalah untuk menebalkan text.
Seperti pada contoh diatas ada tag <strong> </strong> yang mengapit kalimat Daftar Buku Sejarah dan Pahlawan Kemerdekaan:
Silahkan Anda coba sendiri apa yang terjadi kalau tag <strong> </strong> dihapus.
Anda lihat perbedaannya?
Demikian cara membuat List atau Daftar dengan kode HTML.

0 Membuat Hyperlink HTML

By Unknown | At 22.49 | Label : Belajar HTML | 0 Comments

Membuat Hyperlink HTML

Hyperlink adalah link yang menghubungkan file dari sebuah website ke file yang lain dalam website itu sendiri.
Dulu ketika pertama kali ingin Belajar Membuat Website, saya heran sekali melihat text berwarna biru yang ada garis dibawahnya (underline) kalau diklik dapat membuka halaman lain dari sebuah website.
Tentu saja ini sangat menarik bagi saya yang pada waktu itu baru mulai belajar membuat website.
Setelah saya pelajari, ternyata caranya sangat mudah. Kita tinggal menuliskan kode Hyperlink HTML dan memasangnya pada salah satu halaman website.

Misalkan kita mempunyai website www.contoh-saja.com yang berisi 2 halaman, yaitu:
Halaman Website 1 dengan link: http://www.contoh-saja.com/website-1 dan
Halaman Website 2 dengan link: http://www.contoh-saja.com/website-2
Pada halaman website 1 kita tulis kode Hyperlink HTML seperti ini:

<a href=”http://www.contoh-saja.com/website-2″>LINK HALAMAN 2 INI</a>

Sebagai contoh saya berikan gambar dari Halaman 1 seperti dibawah ini
Kalau Anda Klik link “LINK HALAMAN 2 INI“, maka akan terbukalah halaman 2 dari website ini.
Contohnya seperti ini:

Halaman 1

Untuk membuka Halaman 2 silahkan Klik LINK HALAMAN 2 INI

Halaman 2

Untuk kembali ke Halaman 1 silahkan Klik KEMBALI KE HALAMAN 1

Dari Halaman 2 kembali ke Halaman 1 penulisan kodenya seperti ini:

<a href=”http://www.contoh-saja.com/website-1″>KEMBALI KE HALAMAN 1</a>

Kalau Anda Klik Link “KEMBALI KE HALAMAN 1“, maka Anda akan melihat kembali Halaman 1 dari website.

CATATAN: Halaman 1 dan Halaman 2 diatas hanya sebagai contoh yang sengaja saya buat pada satu halaman artikel ini untuk memudahkan pembaca supaya tidak me-loncat2 kehalaman lain. Jadi yang perlu diperhatikan adalah penulisan kode hyperlinknya.

Link menuju halaman lain tidak harus diisi text, tapi dapat juga diisi gambar/image. Kodenya: <a href="http://www.contoh-saja.com/website-1"><img src="IMAGE"></a> Sebagai contoh Silahkan Klik Gambar/Image disebelah ini – > >

Demikian cara Membuat Hyperlink HTML untuk membuka halaman lain dari website.
 

0 Merapikan Kalimat Dengan Text HTML

By Unknown | At 22.47 | Label : Belajar HTML | 0 Comments

Merapikan Kalimat Dengan Text HTML

Dulu saya sering kesal kalau lihat postingan saya susunannya di halaman website statis kelihatan gak rapi.
Sudah saya coba merapikannya waktu menulis artikelnya, tapi waktu di publish jadi amburadul kembali. Setelah mencari kesana-kemari akhirnya saya temukan juga cara merapikan text dengan Text HTML.

Ternyata caranya merapikan kalimat dengan Text HTML itu sederhana sekali. Kita hanya perlu meletakkan tags <p align="#"> dan </p> Tanda # boleh diganti dengan center, right atau justify.
Kalau tidak diisi maka secara default kalimat diatur dengan left.
align-left membuat semua baris text berada disisi sebelah kiri.
align-right membuat semua baris text berada disisi sebelah kanan.
align-center membuat semua baris text berada ditengah halaman.
align-justify membuat semua baris text diatur sama jaraknya dengan tepi halaman sebelah kiri dan kanan.
Dibawah ini saya berikan contoh artikel yang saya buat dengan Mengatur Text HTML.
Diatas text saya tambahkan judul dengan warna merah dan ukuran yang besar sekedar untuk memperjelas keterangan saya saja.

Ini artikel dengan tags <p> </p> atau boleh juga diisi align="left". Tidak akan ada pengaruhnya sama sekali.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim. </p>

Ini artikel dengan tags <p align="right"> </p>
<p align="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim.</p>

Ini artikel dengan tags <p align="center"> </p>
<p align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim.</p>

Ini artikel dengan tags <p align="justify"> </p>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nibh sem, feugiat vitae placerat vel, facilisis quis arcu. Sed eu pretium tortor. Nam a velit in ipsum euismod ultrices quis non est. Aenean congue vulputate erat et accumsan. Integer id metus adipiscing felis suscipit laoreet viverra sed sapien. Donec purus ligula, elementum vel tristique sit amet, tempor ut est. Morbi placerat rutrum urna at dignissim.</p>

Terserah Anda untuk memilih pengaturan Text HTML yang sesuai untuk artikel yang akan Anda publikasikan di website HTML Anda.

0 cara membuat cursor bertabur bintang

By Unknown | At 22.06 | Label : Tips And Trick Blogger | 0 Comments

1.Login ke blogger.

2.Klik Tatat Letak.

3.Klik Tambah Gadget.

4.Pilih HTML/javascript.

5.Pilih lalu Copy dan paste kode di bawah ini ke dalah kotak HTML/javascript tadi .

Bintang Biru

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script>

Bintang Hijau

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Bintang Merah

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script>

Bintang Putih

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

Bintang Ungu

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script>

6.Kalo sudah selesai jangan lupa klik SIMPAN...

7.Selanjutnya silkan sobat lihat hasilnya...

0 Share Easy Gift Animator 5.3 Full Keygen (GIF)

By Unknown | At 20.57 | Label : Software | 0 Comments

Easy GIF Animator adalah program kuat dan mudah digunakan untuk membuat dan mengedit gambar animasi GIF. Dengan Easy GIF Animator, dapat dengan mudah membuat gambar animasi GIF, banner dan button dalam waktu singkat. Sobat dapat menggunakan fitur-fitur khusus untuk menambahkan efek visual yang menakjubkan . Easy GIF Animator mendukung semua jenis GIF animasi dan menyediakan kompresi tinggi dan kualitas yang hebat untuk gambar GIF animasi Sobat .



Link Download :
Download Installer Only
Download Keygen Only
password : bagas31.co

0 Software ProphecyMaster 1.01 Peramal Wajah di masa datang

By Unknown | At 20.43 | Label : Software | 0 Comments

Screen Shot

ProphecyMaster merupakan software fun untuk meramal wajah seseorang di masa mendatang. Software ini diciptakan oleh penyedia software Luxand.

Caranya meramal wajah dengan software ini sangat gampang dan hanya beberapa langkah saja. Anda tinggal memilih foto mana yang ingin diramal, maka dengan segera hasilnya akan muncul. Uniknya, hasil foto ramalan wajah dari ProphecyMaster, bukan foto wajah gambar kartun, melainkan seperti foto asli sehingga seperti hasil foto pemotretan ketika Anda sudah tua.

Silahkan mencoba dan seperti apa wajah Anda 20 tahun yang akan datang, masih tetap muda seperti sekarang atau sudah keriput.