Tampilkan postingan dengan label Belajar Html. Tampilkan semua postingan
Tampilkan postingan dengan label Belajar Html. Tampilkan semua postingan

Sabtu, 21 Agustus 2010

Membuat tag html baru

Diposting oleh Hizrian di 20.30 | Sabtu, 21 Agustus 2010 | 26 komentar
Label: , , ,

Bismillah, Ketemu lagi dengan penulis misterius alias gak serius (wkwkwkk) yang selalu memberi trik blog hangat sekaligus basi Emoticon Ketawa.
Saatnya masuk ke tentang Membuat tag html baru.
Apa itu tag?
Saat membuat halaman web kita membutuhkan fungsi tag. Dengan tag lah kita bisa membuat web
Format menulis tag sepeti berikut:
<tag>Isi dengan Teks atau Gambar</tag>

Pernahkah anda berpikir dapat menulis tulisan ke kanan hanya dengan mengetik <kanan>Tes</kanan> sehingga tulisan berada dikiri seperti ini:
Tes.

Mungkin ada! Tetapi sedikit oleh karena itu saya menulisnya.
Sebagai contoh saya akan membuat tag html <kanan>
Caranya seperti ini:
1. Masuk Dasbor --> rancangan --> edit html
2. Cari code berikut:

.post {
font: 13px trebuchet ms;
margin-bottom:15px;
text-align:justify;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
3. Lalu pastekan code berikut dibawahnya:
.post kanan {
text-align: right;
float: right;
}
4. Save Template

Penjelasan:
1. code yang berwarna merah adalah nama tag html yang kita buat
2. code yang berwarna biru adalah perintahnya
Selamat mencoba!!

Readmore..

Selasa, 10 Agustus 2010

Memberi background pada sidebar heading

Diposting oleh Hizrian di 23.03 | Selasa, 10 Agustus 2010 | 18 komentar
Label: , ,


Assalamu'alaikum, apa kabar semua? semoga sehat semua ya, amin
Sekarang saya akan membahas "Memberi background pada sidebar heading". Apa itu sidebar heading? sidebar heading adalah kepala dari heading(memangnya sidebar juga punya kepala wkwkw...) yang dimaksud adalah dimana judul widget berada.

Gambar disamping adalah contoh sidebar heading yang telah diberikan background. ^_^
Berikut cara Memberi background pada sidebar heading:

1. Masuk dasbor
2. Pilih Rancangan --> edit html
3. Cari code berikut:

/* Sidebar Content
----------------------------------------------- */
.sidebar {

color: $sidebartextcolor;
line-height: 1.5em;

}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom: 1px solid #99C9FF;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

4. Lalu paste code berikut setelah code diatas

/* sidebar heading */
#sidebar h2 {
padding: 6px 0 6px 7px;
text-align: justify;
color: #ffffff;
font: normal bold 98% Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
background-image:url("http://i45.tinypic.com/3320w06.gif");
background-repeat:repeat-x;
background-position:center right;
border-bottom: 1px solid #99C9FF;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
border:2px solid #E8EDFB;
}

5. Save/Simpan

Note:
*Code yang bewarna merah adalah url gambar background
*Code yang dicari kemungkinan berbeda jika tidak ada cari yang hampir mirip

Readmore..

Minggu, 08 Agustus 2010

Cara membuat sidebar pada dokumen html

Diposting oleh Hizrian di 23.54 | Minggu, 08 Agustus 2010 | 25 komentar
Label:

Selamat datang di k-blogger. sekarang kita akan belajar tentang "Cara membuat sidebar pada dokumen html". Post ini adalah sambungan Dasar dasar html 1-4:
Dasar dasar html 1
Dasar dasar html 2
Dasar dasar html 3
Dasar dasar html 4 (Cara menambah kode css pada dokumen html)
Bagaimana Cara membuat sidebar pada dokumen html?
Berikut:
1. Buka notepad
2. Ketikkan kode berikut:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nama dokumen</title>
</head>
<body>
</body>
</html>
3. Dibawah kode </head> pastekan kode berikut:

<style>
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9oQg8F4MSNFhfPX-4Fd4PeO4jJV3VGQnDmJHPdx5qtyLc3d0mmeg-bwyqzNFehfEeyiN3MiA2XL0bWRM_K6UkxWwPnzUImEJgRURjBKFhAtIwzdimBcF68wNRbV8x7AT05mNM5i7kM3qi/s1600/sidebg.gif) repeat-y scroll left

top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}
</style>
4. Dibawah kode <body> pastekan kode berikut

<div id="sidebar-top">
<div id="sidebar" class="sidebar section">
Label
<hr /></hr>
[<a dir="ltr" href="#Link">Berita online</a>][<a dir="ltr" href="#Link">Download</a>][<a dir="ltr" href="#Link">Humor</a>]
</div>
</div>
5. Lalu save dengan file name: namadokumen.html dan save type: All Files
Lihat:
Cara mensave



















Berikut hasilnya lihat di Contoh

Readmore..

Sabtu, 24 Juli 2010

Dasar dasar html 4

Diposting oleh Hizrian di 17.24 | Sabtu, 24 Juli 2010 | 16 komentar
Label: ,

Dalam Dasar dasar html 4 ini saya tidak membahas tag lagi karena telah saya bahas pada post:

  • Dasar dasar html 3
  • Dasar dasar html 2
  • Dasar dasar html 1
    • Sekarang saya akan membahas bagaimana cara menambah CSS dalam Bahasa HTML.
    Sebagai contoh saya akan mempraktekkan cara membuat Bubble tooltips 100% menggunakan CSS.
    Caranya seperti berikut:
    1. Cari code <body>
    2. Dibawah code tersebut tambahkan code dibawah ini
      <style type="text/css">
      ....
      </style>
    3. Ganti code yang berwarna merah dengan code css berikut:
      /*---------- balon tips -----------*/
      a.bt{
      position:relative;
      z-index:24;
      color:#3CA3FF;
      font-weight:bold;
      text-decoration:none;
      }

      a.bt span{ display: none; }

      /*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
      a.bt:hover{ z-index:25; color: #aaaaff; background:;}

      a.bt:hover span.balontips{
      display:block;
      position:absolute;
      top:0px; left:0;
      padding: 15px 0 0 0;
      width:200px;
      color: #993300;
      text-align: center;
      filter: alpha(opacity:90);
      KHTMLOpacity: 0.90;
      MozOpacity: 0.90;
      opacity: 0.90;
      }

      a.bt:hover span.atas{
      display: block;
      padding: 30px 8px 0;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat top;
      }

      a.bt:hover span.tengah{
      display: block;
      padding: 0 8px;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAuzrWOxtFDg3M3CmMAK4kv8iisTez1cFFSYy0Mq2ID4Y6aO-05KjmA-Dlxp7Lr8wORwrrzqPVVJl-4xd0KsbCaxGcBJE1mcV3s2HkrNJBVPNkkaN5s6J2149tAPl5QHUwAYl2M4SJZmQ/) repeat bottom;
      }

      a.bt:hover span.bawah{
      display: block;
      padding:3px 8px 10px;
      color: #548912;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat bottom;
      }

      /*---------- balon tips END-----------*/
    4. Untuk menggunakan code css tesebut caranya seperti ini:
      Dibawah code </style> Pastekan code berikut:
      <a class='bt' href='#'>FAQ&#39;S<span class='balontips'>
      <span class='atas'>
      </span>
      <span class='tengah'>
      Tulis apa aja tentang FAQ&#39;S!
      </span>
      <span class='bawah'>
      </span>
      </span>
      </a>

    5. Maka hasilnya seperti ini:

    Readmore..

    Jumat, 23 Juli 2010

    Dasar dasar html 3

    Diposting oleh Hizrian di 00.37 | Jumat, 23 Juli 2010 | 15 komentar
    Label:

    Sudah siapkah anda untuk mempelajari Dasar dasar html 3? pasti sudah siap
    oh iya, sebelum mempelajari Dasar dasar html 3?
    sebaiknya anda membaca post berikut:
    Dasar dasar html 1
    Dasar dasar html 2

    -Tag <p>
    Digunakan untuk mendefisinikan suatu paragraf
    Cara menggunakan:
    <p>Dasar dasar html 1? pasti sudah siap</p>
    <p>Dasar dasar html2</p>
    <p>Dasar dasar html3</p>
    Hasilnya:

    Dasar dasar html1


    Dasar dasar html2


    Dasar dasar html3



    -Tag <html>
    Digunakan agar dapat diketahui bahwa kode yang digunakan adalah kode html

    -Tag <head>
    Digunakan untuk membuat dan menambah elemen-elemen pada header

    -Tag <body>
    Digunakan untuk membuat dan menambah elemen-elemen pada badan suatu dokumen html

    -Tag <title>
    Digunakan untuk memberi nama/judul pada dokumen html yang akan dimunculkan pada browser

    Cara menggunakan Tag <html>,<head>,<title>,<body>
    <html>
    <head>
    <title>Dasar dasar html<title>
    </head>
    <body>
    <p>Dasar dasar html1</p>
    <p>Dasar dasar html2</p>
    <p>Dasar dasar html3</p>
    </body>
    </html>
    Hasilnya:

















    -Tag <big>
    Digunakan untuk memperbesar tulisan <big> tidak sama dengan tag <b> (bold) karena tag <big> lebih besar dari pada <b>
    Cara menggunakan:
    <big>Big lebih besar dari pada bold</big>
    <b>Bold lebih kecil dari pada big</b>
    Hasilnya:
    Big lebih besar dari pada bold
    Bold lebih kecil dari pada big

    Sampai disini dulu Dasar dasar html 3 Nanti saya akan lanjutkan pada Dasar dasar html 4 dengan pembahasan lebih seru lagi

    Readmore..
    Langganan: Komentar ( Atom )
     

    Blogroll

    Flagcounter

    free counters
    © Copyright 2010. K-blogger . All rights reserved | K-blogger is proudly powered by Blogger.com | Template by o-om.com - zoomtemplate.com
    Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online