Dewi Newbie ™

Showing posts with label html. Show all posts

Pada postingan kali ini saya akan membahas tentang cara membuat title bergerak di file html. Silahkan ketikkan script di bawah ini pada text editor yang kalian punya dengan nama index.html .. Eitss tapi jangan di copas yaa..

<html>
<head>
<script language='javascript'>
var txt=" - Devinewbie.Blogspot.Com - ";
var kecepatan=300; var segarkan=null; function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

</head>
<body>

Isikan content anda disini !!
</body>
</html>

Note : Ganti tulisan - Devinewbie.Blogspot.Com – sesuai dengan judul yang kalian inginkan

Dan hasilnya adalah :::

__ Selamat Mencoba __

Cara Membuat Background Transparan dengan CSS

Untuk membuat background transparent, disini kita dapat menggunakan 2 properti style CSS, yaitu dengan menggunakan opacity dan background RGBA (Red, Green, Blue, Alpha). Oke sekarang kita coba satu-satu :

1 . Contoh dengan menggunakan opacity:

Kode HTML:

<div class="transparan1"></div>

Kode CSS:

.transparan1{background:#000;opacity:0.4;filter:alpha(opacity=40);}

style "filter:alpha(opacity=40);" diatas adalah untuh IE.

Untuk nilai (value) dari opacity dan alpha kalau 0.1 berarti 10%, 0.2=20%... dst, untuk nilai rgb-nya dapat dilihat di Kode warna RGB sedangkan jika menggunakan filter maka nilainya langsung ditulis tanpa lambang %, contoh 12 artinya 12%, 50=50%...dst.

2 . Contoh dengan menggunakan rgba:

Kode HTML:

<div class="transparan2"></div>

Kode CSS:

.transparan2{background:rgba(0,0,0,0.4);}

maaf untuk pengguna MSIE, bila ada yang mempunyai solusi agar rgba ini bisa jalan di MSIE silahkan sampaikan melalui comment.

Dengan properti opacity maka efek dari elemen yang menggunakan opacity tersebut akan mempengaruhi semua elemen-elemen didalamnya. Seperti pada contoh pertama diatas semuanya menjadi ikut redup dan hampir tidak terbaca padahal warna tulisannya adalah warna putih sama seperti contoh yang kedua.

Kalau ada yang kurang jelas, dapat ditanyakan pada comment di bawah. :

Cara membuat hari , tanggal dan waktu fomat indonesia dengan jquery atau javascript

1. Buat file bernama jam.js , dan isi kan kode berikut.

function time(){

a = new Date();

D1=a.getDay();

D2=a.getDate();

M=a.getMonth();

Y=a.getFullYear();

h=a.getHours();

m=a.getMinutes();

s=a.getSeconds();

if(h<10){h="0"+h;}

if(m<10){m="0"+m;}

if(s<10){s="0"+s;}

var hari = Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");

var bulan = Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");

document.getElementById("time").innerHTML = hari[D1]+","+D2+" "+bulan[M]+" "+Y+"<br />"+h+":"+m+":"+s;

setTimeout("time()",800);

}

function koleksi(t){location.href="carikoleksi.php";}

$(function(){

$('.rate-btn').hover(function(){

$('.rate-btn').removeClass('rate-btn-hover');

var therate = $(this).attr('id');

for (var i = therate; i >= 0; i--) {

$('.rate-btn-'+i).addClass('rate-btn-hover');

};

});

$('.rate-btn').click(function(){

var therate = $(this).attr('id');

var dataRate = 'act=rate&post_id=<?php echo $post_id; ?>&rate='+therate; //

$('.rate-btn').removeClass('rate-btn-active');

for (var i = therate; i >= 0; i--) {

$('.rate-btn-'+i).addClass('rate-btn-active');

};

$.ajax({

type : "POST",

url : "http://localhost/rating/ajax.php",

data: dataRate,

success:function(){}

});

2. Kemudian buat lagi file bernama index.html, pastekan kode di bawah ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

3. Jalankan index.html di web browser yang ada di laptop anda masing-masing, kalo disini saya masih pake opera… kayak orang jadul gan.. J

4. Dan hasilnya :::

Note :

Kalau program dijalankan, maka “detik” akan bergerak /tidak diam .

Postigan kali ini adalah Belajar Pemrograman HTMLTingkat Dasar, yuk simak baik-baik artikelnya agar cepat bisa .

Pengertian HTML

Apa sih sebenernya HTML itu ? Jawabannya ada di bawah ini, kita simak aja yuk..
HTML adalah singkatan dari HyperText Markup Language yang merupakan sebuah script untuk menyusun dokumen-dokumen halaman Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.

Struktur Penulisan HTML

Contoh Struktur dasar pemrograman web HTML:

<!DOCTYPE html>
<html>
<head>
<title>Judul halaman web disini</title>
</head>
<body>
Informasi halaman website disini
</body>
</html>

Pejelasan Struktur dasar diatas :

A. TAG

Merupakan teks khusus (markup) yang terdiri dari dua karakter yaitu karakter "<" dan karakter ">", sebagai contoh <body> adalah tag dengan nama body.
Secara Umum tag ditulis secara berpasangan contoh tag <body> biasanya diakhiri dengan tag penutup </body> (ditambahkan karakter "/" setelah karakter "<") sehingga informasi yang diberikan didalam tag <body> berada sebelum ditutup dengan </body> .

B. ELEMENT

Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar
<p>
<b> Informasi yang di bold </b>
</p>

Contoh yang salah :
<p>
<b> Informasi yang di bold </p>
</b>

C. ATTRIBUTE

Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Secara umum nilai attribute harus berada dalam tanda petik satu atau dua, Contoh ingin membuat background hitam dengan warna tulisan putih
<body bgcolor="black" text="white">
test html
</body>
(Biasanya jarang digunakan, lebih banyak menggunakan CSS dalam desain tampilan.)

Sebagai panduan, silahkan membuat dokumen html menggunakan Notepad++, setelah membuat silahkan save as dengan extension html contoh save as “index.html”. Itu saja postingan kali ini mengenai belajar pemrograman web HTML sampai ketemu di postingan selanjutnya.

Cara Membuat Operasi Logika Menggunakan PHP

1. langkah pertama aktifkan server offline kalian dulu, lalu copykan script berikut ini di notepad++ atau software editor lainnya

<?php
$bil1=100;
$bil2=20;
$teks1="PHP";
$teks2="php";
$hasil=($bil1 <> $bil2) or ($teks1 == $teks2);
printf(“(%d <> %d) or (%s == %s) adalah %d<BR>\n”,
$bil1, $bil2, $teks1, $teks2, $hasil);
$hasil = ! ($teks1 == $teks2);
printf(“! (%s == %s) adalah %d<BR>\n”,$teks1, $teks2, $hasil);
?>

2. kemudian simpan dengan *.php
3. jalankan melalui server offline kalian, dan lihat hasilnya :)

Kalender sering kita jumpai di halaman web, bahkan di CMS wordpress pun ada widget untuk menampilkan kalendar. Segitu pentingnya fungsi kalendar di sebuah website? kalendar juga sering kita temui di website portal yang memiliki banyak sekali berita, untuk mempermudah pengunjung mengakses berita pada tanggal tertentu biasanya di sediakan kalendar.

Masalahnya bagaimanakan cara membuat kalendar itu agar dinamis? agar sistem tabel nya sesuai dengan jumlah hari pada bulan tersebut (29, 30 atau 31 hari dalam sebulan). Mari kita coba saja langsung.

Membut Fungsi di PHP

Pertama kita perlu untuk membuat sebuah fungsi dengan script PHP berdasarkan bulan dan tahun tertentu. Diawali dengan menentukan hari-hari dalam seminggu, table header, dll.

function draw_calendar($month,$year){

 // Draw table for Calendar 
 $calendar = '<table cellpadding="0" cellspacing="0" class="calendar">';

 // Draw Calendar table headings 
 $headings = array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday',

 'Saturday');
 $calendar.= '<tr class="calendar-row"><td class="calendar-day-head">'

.implode('</td><td class="calendar-day-head">',$headings).'</td></tr>';

 //days and weeks variable for now ... 
 $running_day = date('w',mktime(0,0,0,$month,1,$year));
 $days_in_month = date('t',mktime(0,0,0,$month,1,$year));
 $days_in_this_week = 1;
 $day_counter = 0;
 $dates_array = array();

 // row for week one 
 $calendar.= '<tr class="calendar-row">';

 // Display "blank" days until the first of the current week 
 for($x = 0; $x < $running_day; $x++):
  $calendar.= '<td class="calendar-day-np"> </td>';
  $days_in_this_week++;
 endfor;

 // Show days.... 
 for($list_day = 1; $list_day <= $days_in_month; $list_day++):
  if($list_day==date('d') && $month==date('n'))
  {
   $currentday='currentday';
  }else
  {
   $currentday='';
  }
  $calendar.= '<td class="calendar-day '.$currentday.'">';
  
   // Add in the day number
   if($list_day<date('d') && $month==date('n'))
   {
    $showtoday='<strong class="overday">'.$list_day.'</strong>';
   }else
   {
    $showtoday=$list_day;
   }
   $calendar.= '<div class="day-number">'.$showtoday.'</div>';

  // Draw table end
  $calendar.= '</td>';
  if($running_day == 6):
   $calendar.= '</tr>';
   if(($day_counter+1) != $days_in_month):
    $calendar.= '<tr class="calendar-row">';
   endif;
   $running_day = -1;
   $days_in_this_week = 0;
  endif;
  $days_in_this_week++; $running_day++; $day_counter++;
 endfor;

 // Finish the rest of the days in the week
 if($days_in_this_week < 8):
  for($x = 1; $x <= (8 - $days_in_this_week); $x++):
   $calendar.= '<td class="calendar-day-np"> </td>';
  endfor;
 endif;

 // Draw table final row
 $calendar.= '</tr>';

 // Draw table end the table 
 $calendar.= '</table>';
 
 // Finally all done, return result 
 return $calendar;
}

Fungsi diatas digunakan untuk meng-generate tabel pada bulan tertentu sesuai dengan yang kita inginkan.

Cara Menggunakan Fungsi tersebut adalah seperti berikut

echo '<h2>Juli 2013</h2>';
echo draw_calendar(7,2013);

Jika dijalankan maka akan terbentuk kalender seperti berikut (bulan juni, 2014)

Agar tampilan lebih bagus anda bisa mempercantik tabel tersebut dengan CSS, agar lebih mudah, di fungsi PHP tadi sudah di tentukan nama-nama class nya.

Percantik Dengan CSS

@charset "utf-8";
/* CSS Document */
html,body,form{ margin:0px; padding:0px; font-family:Ebrima, Arial, Helvetica,

sans-serif; font-size:12px; color:#666; empty-cells:hide;}
table.calendar{border-style: solid; border-width: 1px; border-width:1px;

 border-color:#666; -moz-box-shadow:0px 0px 4px #CCCCCC; -webkit-box-shadow:0px

 0px 4px #CCCCCC; box-shadow:0px 0px 4px #CCCCCC; }
tr.calendar-row  {  }
td.calendar-day  { min-height:80px; position:relative; } * html div.calendar-day

 { height:80px; }
td.calendar-day:hover  { background:#FFF; -moz-box-shadow:0px 0px 20px #eeeeee

 inset;

-webkit-box-shadow:0px 0px 20px #eeeeee inset; box-shadow:0px 0px 20px #eeeeee

 inset; cursor:pointer;}
td.calendar-day-np  { background:#eee; min-height:80px; } * html div.calendar-

day-np { height:80px; }
td.calendar-day-head {font-weight:bold; text-shadow:0px 1px 0px #FFF;color:#666;

 text-align:center;

 width:64px; padding:12px 6px; border-bottom:1px solid #CCC; border-top:1px

solid #CCC;

 border-right:1px solid #CCC; background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),

 color-stop(100%,#ededed));
background: -webkit-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#ededed 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',

 endColorstr='#ededed',GradientType=0 );
}
div.day-number{padding:6px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np {padding:5px; border-bottom:1px solid #DBDBDB;

 border-right:1px solid #DBDBDB; font-size:14px;background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff),

color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#f2f2f2 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',

 endColorstr='#f2f2f2',GradientType=0 );
}


.overday{ color:#164b87; text-shadow:0px 1px 0px #FFF;}
.currentday{background: #6cb7f3 !important;
background: -moz-linear-gradient(top,  #6cb7f3 0%, #388be8 100%) !important;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6cb7f3),

 color-stop(100%,#388be8)) !important;
background: -webkit-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
background: -o-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
background: -ms-linear-gradient(top,  #6cb7f3 0%,#388be8 100%) !important;
background: linear-gradient(to bottom,  #6cb7f3 0%,#388be8 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6cb7f3',

 endColorstr='#388be8',GradientType=0 ) !important; color:#FFF  !important;

font-weight:bold; -moz-box-shadow:0px 0px 18px #1F68BA inset; -webkit-box-shadow:

 0px 0px 18px #1F68BA inset; box-shadow:0px 0px 18px #1F68BA inset;
}
.currentday:hover{-moz-box-shadow:0px 0px 24px #074080 inset !important;

  -webkit-box-shadow:0px 0px 24px #074080 inset !important; box-shadow:0px

0px 24px #074080 inset !important;}

Hasilnya adalah sebagai berikut :P

Dewi Newbie ™

Cara Membuat Operasi Logika Menggunakan PHP

Membut Fungsi di PHP

Popular Posts

Followers

Labels

Berita Populer

Postingan Blog