Home / Archives for Mei 2014

Manipulasi atau Menyisipkan element HTML menggunakan appenChild

Posted by code for fun Jumat, 16 Mei 2014 0 komentar
Bagaimana menyisipkan elemen html menggunakan perintah appendChild ?

Contoh element script diatas adalah bagaimana memanipulasi tag tag elemen html menggunakan appendChild, sebelumnya saya telah menjelaskan bagaimana menggunakan tag tersebut pada Jquery yang dapat anda baca di artikel ini append Jquery.

 Pada perintah appendChild memiliki fungsi yang sama dengan library append yang ada pada jquery, tapi bedanya anda membutuhkan contaner sebagai covering document model dengan memanggil fungsi document.createElement('Nama tag Element'), element  tersebut sebagai tempat anda menambahkan dan memanipulasi objek html.

Lihat contoh baris dari html ini

<body>
.....

   <div>
     <button onclick="append(document.getElementById('container'))">KLIK</button>
   </div>
   <div id="contaner">
      //anda akan menyisipkan atau menambahkan tag html disini.
   </div>

.....
</body>
disini saya memanggil document.getElementById('container'), ini adalah sebagai parent dari element yang akan anda sisipkan atau anda akan memasukan element yang ada buat di dalam tag html tersebut.

dengan begitu anda dapat memanggil function append() dengan memanggilanya seperti ini append('nama id dari container parent anda')

lihat contoh javascript ini.

<head>
.....
 
<script>
  function append(parent){
    div = document.createElement('div')
    div.innerHTML = '<label>test pertama</label>';
    parent.appendChild(div)
  }
</script>

.....
</head>
<body>
.....

Baca Selengkapnya ....
Categories:

Bagaimana cara membuat tabel pada HTML

Posted by code for fun Rabu, 14 Mei 2014 0 komentar
Bagaimana cara membuat tabel pada HTML?

Nomor Nama Aktivitas
001 Hari Agustian Membuat tabel
002 Budiman Membuat Blog di Learn to Code
003 Yulia Memposting artikel di Learn to Code


Tabel pada html terdiri dari dua bagian diantaranya <Thead > sebagai pembentuk kolom dan <Tbody> sebagai content pada kolom yang telah di buat, dan untuk membuat Row pada tabel anda dapat menggunakan element HTML berupa <Tr>.

Namun untuk mengisi cell atau field pada tiap kolom dan baris anda memerlukan element html berupa <Td>

Lihat struktur html pembentuk tabel di atas.

<body>
......


<table>
   <thead>
     <tr>
       <th>Nomor</th>
       <th>Nama</th>
       <th>Aktivitas</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>001</td>
       <td>Hari Agustian</td>
       <td>Membuat Table</td>
     </tr>
     <tr>
       <td>002</td>
       <td>Budiman</td>
       <td>Membuat Blog di <a href="https://learntocodes.blogspot.com/">Learn to Code</a></td>
     </tr>
     <tr>
       <td>003</td>
       <td>Yulia</td>
       <td>Memposting artikel di <a href="https://learntocodes.blogspot.com/">Learn to Code</a></td>
     </tr>
   </tbody>
</table>


.....
</body>

Anda dapat dengan  mudah menghias atau memperindah tampilan tabel yang telah anda buat dengan menggunakan css, dibawah ini adalah gambaran printah css sederhana, tapi belum saya test yaa : )

<head>
.....
 
<style type= text/css>
    /* css tabel */  
    thead > tr { background-color:#eeeeee };
    thead > tr > th { border:thin #aeaeae solid}
    tbody > tr { background-color:#ffffff };
    tbody > tr > td { border:thin #aeaeae solid}

 </style>

.....
</head>
<body>
.....


Baca Selengkapnya ....
Categories: ,

Cara Menyisipkan gambar pada tag HTML

Posted by code for fun 0 komentar
Bagaimana cara menyisipkan gambar atau foto pada html ?

Ada banyak cara yang dapat anda lakukan untuk menyisipkan gambar pada tag HTML, dan programmer design biasanya akan memanipulasi dengan menggunakan Cascading Style Sheets (CSS) atau hanya menempatkan sebuah tag image saja pada container gambar yang mereka inginkan.

Lihat baris code dibawah ini, berupa beberapa baris html 

<body>
.....


<div id="contaner">
    <!-- disini saya akan menyisipkan gambar pada 
    tag html div dengan id container -->
</div>

.....
</body>

Dengan beberapa baris css ini anda dapat memasukan gambar pada element dengan nama div

<head>
.....
 
<style type= text/css>
  #container {
    /* background */  
    background:transparent url('url gambar atau foto') no-repeat center center;
    /* pastikan backgroundnya mengcover tinggi dan luasnya container gambar */
    background-size: contain;
   }

 </style>


.....
</head>
<body>
.....

Atau anda bisa langsung menyisipkan css tersebut pada element yang kamu inginkan dengan menggunakan Style 

<body>
.....


<div id="contaner" style="background:transparent url('url gambar atau foto') no-repeat center center;background-size: contain;">
    <!-- disini saya akan menyisipkan gambar pada 
    tag html div dengan id container -->
</div>

.....
</body>

Jika concern dengan masalah Search Engine Optimization SEO pada gambar yang ingin anda jadikan background, cara ini mungkin akan banyak dipilih oleh para programmer design yaitu dengan langsung menggunakan element html dengan nama <img/> dengan menggunakan judul tag html berupa img robot mesin pencari akan mengindeks gambar dan judul anda, dan jangan lupa untuk menambahkan ALT karena itu akan berpengaruh terhadap hasil pencarian pada gambar.

<body>
.....


<div id="contaner" >
    <img alt="judul gambar" height="100%" src="url gambar kamu" title="judul gambar" width="100%" />
</div>

.....
</body>

Baca Selengkapnya ....
Categories: ,

Bagaimana Menyisipkan Element pada HTML ?

Posted by code for fun 0 komentar
Bagaimana Menyisipkan Element pada HTML ?

Pertanyaan ini tampak jelas bagi seorang web developer jika ingin menyisipkan element html yang dinginkan pada container element, dan cara yang paling masuk diakal adalah  manipulasi menggunakan skrip pada javascript dan yang paling mudah untuk digunakan adalah menggunakan library yang ada pada JQuery.

Menyisipkan element ini juga bisa disebut dengan document object model atau DOM element dimana semua tag element dapat di manipulasi dengan menyisipkan tag element lain menggunakan javascript

Dini saya akan membahas bagaimana skrip ini bekerja baik pada jquery atau menggunakan javascript.
  • JQuery ( .append ) 
<div id="contaner">
  <!-- saya menyisipkan/dom elementnya disini -->
</div>
Jika anda ingin menggunakan library jquery .append anda tinggal memanggilnya menggunakan printah seperti baris dibawah ini.

function appendContainer(parent,object){
   parent.append(object)
}
//dan panggil functionnya
var object = '<span>hello world</span>';
var parent = $('#contaner')
appendContainer(parent,object);
Tambahan library .append akan menaruh element tersebut paling bawah terhadap element element html yang ada di dalam container.

Baca Selengkapnya ....
Categories:
Penulis, hari agustian. Diberdayakan oleh Blogger.