Blogroll

Responsive Ads Here

Wednesday, 13 March 2019

Menyajikan tabel pada halaman web

Menyajikan tabel pada halaman web
Menyajikan tabel pada halaman web...!:v

sekarang kita akan belajar perogram nih...!
yang kita pelajarkan adalah tentang bagaimana cara membuat tabel pada halaman web yang kita buat .
banyak sekali yang harus kita pelajarkann dalam berbasi perogram.

 Terdapat banyak cara untuk menampilkan data, mulai dari dengan menggunakan grafik, daftar, sampai dengan tabel. Tabel pada umumnya digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. perpotongan baris dan kolom di dalam tabel disebut dengan sel. Di dalam html, memungkinkan untuk menampilkan data di dalam tabel secara atraktif.

Pengorganisasian data yang baik dan benar pada sebuah tabel HTML akan sangat membantu dalam mengembangkan aplikasi web, terutama jika tabel yang ingin dibangun harus bersifat dinamis. Anatomi halaman web secara garis besar anatomi atau susunan dari suatu halaman web terdiri dari containing block, Logo, navigation, content, dan white space.
  1. Containing Block merupakan bagian dari halaman web yang membungkus semua komponen halaman web. Umumnya dibuat dengan tag <body>, <div> atau <table>.
  2. Logo. adalah identitas perusahaan, organisasi, pemilik situs.
  3. Navigation atau menu merupakan bagian penting dari situs yang memudahkan pengunjung berpindah-pindah halaman.
  4. Content atau isi adalah segalanya, karena disinilah sebagian besar informasi disajikan.
  5. Footer merupakan bagian bawah dan berisi informasi singkat pemilik situs (copyright) dan beberapa link.
  6. Whitespace merupakan area kosong yang membatasi antar-komponen. Whitespace menjadi penting agar pengunjung mempunyai ruang berhenti di antara bagian-bagian situs yang lain. Whitespace dapat juga diisi dengan banner atau animasi.

A.Layout Halaman Web
Layout situs merupakan tata letak elemen halaman situs web.Layout situs yang baik akan menjadikan halaman web web baik juga. Dengan desain yang baik akan membuat pengunjung merasa nyaman dengan tampilan (layout) halaman web tersebut, dan tetap dapat fokus pada isi (content). Desain halaman web tidak mengganggu kejelasan bagian isi.

Pada desain layout yang tepat, pengunjung dapat berpindah ke halaman lain dengan mudah melalui navigasi yang baik, mudah dan informatif. Pengunjung merasa bahwa setiap halaman dari situs merupakan satu kesatuan. Setiap halaman memiliki posisi dan kesamaan tampilan (layout), yang berbeda hanya isi (content). Desain layout suatu halaman web meliputi penyusunan:
  1. Pembagian tempat pada halaman
  2. Pengaturan jarak sepasi
  3. Pengelompokan teks dan grafik
  4. -Penekanan pada suatu bagian tertentu

Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah
Layout Web
  1. Top Index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine. Navigasi atau daftar isi berada dibagian atas dari halaman web, contohnya adalah tampilan dari www.google.com
  2. Bottom Index biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal. Navigasi atau daftar isi berada dibagian bawah dari halaman web, seperti pada tampilan halaman web education and training
  3. Left Index digunakan untuk layar dengan resolusi yang lebar sehingga mudah. Dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama. Navigasi atau daftar isi berada dibagian kiri dari halaman web.
  4. Layout Split merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web. Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web,
  5. Alternating Index digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain. Navigasi atau daftar isi berada dibagian kanan dan kiri dari halaman web.

Desain Halaman Web dengan Konsep Tabel
1. Top Index
Berikut adalah listing program untuk membuat layout “top index” halaman web dengan elemen table.
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form action="" id="form1" method="post" name="form1">
<table align="center" border="1" style="height: 242px; width: 100%;"><tbody>
<tr> <td align="center" bgcolor="#FFFF00" bordercolor="#FFFFFF" height="15"><strong>Banner
atau iklan</strong></td> </tr>
<tr> <td align="center" bgcolor="#FFCCCC" height="15"><span style="color: red;">Daftar&nbsp;isi&nbsp;</span>
<span style="color: red;">atau navigasi </span></td> </tr>
<tr> <td align="center" bgcolor="#FF66CC" height="135">
Body atau contents(isi)</td> </tr>
<tr> <td align="center" bgcolor="#CCFF99" height="15"><span style="color: #9966cc;">Info&nbsp;tambahan atau lain-lain </span></td> </tr>
</tbody></table>
</form>
</body>
</html>
Hasilnya adalah sebagai berikut :
Banner
atau iklan
Daftar isi 
atau navigasi

Body atau contents(isi)
Info tambahan atau lain-lain
2. Bottom Index
Berikut adalah listing program untuk membuat layout “bottom index” halaman web dengan elemen table.
<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500px" height="242" border="1"
align="center">
<tr><td height="15" align="center" bordercolor="#FFFFFF"
bgcolor="#FFFF00"><strong><font size="+5">Banner
/ Judul</font></strong></td>
</tr>
<tr>
<td height="135" align="center" bgcolor="#CCCCCC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau
contents(isi)</font></p>
<p><font color="#CC0000">Body atau
contents(isi)</font></p>
<p><font color="#FFFF00">Body atau
contents(isi)</font></p>
<p><font color="#990033">Body atau
contents(isi)</font></p></td>
</tr>
<tr>
<td height="15" align="center"
bgcolor="#CCFF99"><font color="#FF0000"><strong><font
size="+2">Daftar
isi atau navigasi </font></strong></font><font
color="#9966CC" size="+2">&nbsp;</font></td>
</tr>
</table>
</form>
</body>
</html>

Hasilnya adalah sebagai berikut.
Banner
/ Judul

Body atau contents (isi)
Body atau
contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Daftar
isi atau navigasi  
3. Left Index
Berikut adalah listing program untuk membuat layout “left index” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>Left Colour</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" height="247" border="1"
align="center" cellspacing="1">
<tr>
<th width="160" rowspan="3" valign="top"
bgcolor="#993366"><p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p></th>
<th width="340" height="15" align="center"
bgcolor="#FFFF99"><strong><font color="#CCCCCC"
size="+4">Electronic
Shop</font></strong></th>
</tr>
<tr>
<td height="76" align="center" valign="top"
bgcolor="#FFFF99"><p>&nbsp;</p>
<p>Selamat datang di web kami, penjualan produk
online ini adalah yang pertama di kota kami.
kualitas dan harga dapat dipercaya langsung saja
pesan dan menjadi langganan kami. </p></td>
</tr>
<tr>
<td height="20" align="center" bgcolor="#FFFF99">
<font size="+2">profilkami.com</font></td>
</tr>
</table>
</form>
</body>
</html>

Hasilnya adalah sebagai berikut
Home
Profile
About Us
Blog
Contact Us		Electronic
Shop

Selamat datang di web kami, penjualan produk
online ini adalah yang pertama di kota kami.
kualitas dan harga dapat dipercaya langsung saja
pesan dan menjadi langganan kami.

Profilkami.com
4. Layout Split
Berikut adalah listing program untuk membuat layout “split” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>left </title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" height="312" border="1"
align="center">
<tr>
<td width="15%" rowspan="2" align="center"
bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
<td width="67%" height="15" align="center"
bgcolor="#FFCCFF"><font
size="+3"><strong>Banner/judul</strong></font></td>
<td width="18%" rowspan="2" align="center"
bgcolor="#99CC99"><strong>Daftar
Isi </strong> </td>
</tr>
<tr>
<td height="256" align="center"
bgcolor="#CCCCCC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau
contents(isi)</font></p>
<p><font color="#FFFF00">Body atau
contents(isi)</font></p>
<p><font color="#990033">Body atau
contents(isi)</font></p>
</td>
</tr>
<tr bgcolor="#FF99FF">
<td height="15" colspan="3" align="center">Lainlain
</td>
</tr>
</table>
</form>
</body>
</html>

Hasilnya adalah sebagai berikut.
Daftar
Isi		Banner/judulDaftar
Isi
Body atau contents(isi)
Body atau contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Body atau
contents(isi)
Lainlain

5.Alternating Index
Berikut adalah listing program untuk membuat layout “alternating index” halaman web dengan elemen table.
<!DOCTYPE html >
<head>
<title>alternating</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="500" height="338" border="1"
align="center">
<tr>
<td height="148" align="center" bgcolor="#FF66CC"><font size="+1"><strong>Teks/Daftar
isi</strong></font></td>
<td align="center" bgcolor="#FFFFCC"><font
color="#000066" size="+7"><strong><em>Gambar
</em> </strong></font></td>
</tr>
<tr>
<td height="161" align="center"
bgcolor="#FFFF99"><font color="#CC0000"
size="+7"><strong><em>Gambar
</em></strong></font><font
size="+7"><em></em></font></td>
<td align="center" bgcolor="#FF66CC"><font
size="+1"><strong>Teks/daftar
isi</strong></font></td>
</tr>
<tr bgcolor="#996666">
<td height="100" colspan="2" align="center"><font
color="#FFFFFF"><strong><font size="+1">Lainlain</
font></strong></font></td>
</tr>
</table>
</form>
</body>
</html>
Hasilnya adalah sebagai berikut.
Teks/Daftar
isi		Gambar
GambarTeks/daftar
isi
Lainlain
Read more »
By at No comments:

Tuesday, 12 March 2019

RPP_SILABUS PEMROGRAMAN WEB

RPP_SILABUS PEMROGRAMAN WEB
By at No comments:

Saturday, 10 November 2018

membuat efek buble dengan java script

bola , efek
membuat efek buble dengan java script
membuat efek buble dengan java script !!!
pasti kalian ingin membuat efek buble di web untuk mempercaantik web dan memperbagus web .
ini scriptnya:

<html><body>
<script language="JavaScript1.2">
<!-- Begin

var no = 15; // image number or falling rate
var speed = 2; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "bubble.gif"
snow[1] = "bubble.gif"
snow[2] = "bubble.gif"

var ns4up = (document.layers) ? 1 : 0;  // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp;    // coordinate and position variables
var am, stx, sty;  // amplitude and step variables
var i, doc_width = 800, doc_height = 1800;

if (ns4up||ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
} else if (ie4up) {
        doc_width = document.body.clientWidth;
        doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02 + Math.random()/10; // set step variables
        sty[i] = 0.7 + Math.random();     // set step variables
        if (ns4up) {                      // set layers
                if (i == 0) {
                        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
                } else {
                        document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
                }        } else if (ie4up||ns6up) {                if (i == 0)
{
                        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
                } else {
                        document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
                }
        }
        if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() {  // Netscape main animation function
        for (i = 0; i < no; ++ i) {  // iterate for every dot
                yp[i] -= sty[i];                if (yp[i] < -50) {
                        xp[i] = Math.random()*(doc_width-am[i]-30);
                        yp[i] = doc_height;
                        stx[i] = 0.02 + Math.random()/10;
                        sty[i] = 0.7 + Math.random();
                        doc_width = self.innerWidth;
                        doc_height = self.innerHeight;                }
                dx[i] += stx[i];
                document.layers["dot"+i].top = yp[i]+pageYOffset;
                document.layers["dot"+i].left = xp[i] +
am[i]*Math.sin(dx[i]);
        }
        setTimeout("snowNS()", speed);
}

function snowIE_NS6() {  // IE main animation function
        for (i = 0; i < no; ++ i) {  // iterate for every dot
                yp[i] -= sty[i];
                if (yp[i] < -50) {
                        xp[i] = Math.random()*(doc_width-am[i]-30);
                        yp[i] = doc_height;
                        stx[i] = 0.02 + Math.random()/10;
                        sty[i] = 0.7 + Math.random();
                        doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
                        doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
                }
                dx[i] += stx[i];
                if (ie4up){
                document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
                document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
                }
                else if (ns6up){
                document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
                document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
                }
        }
        setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
        snowNS();
} else if (ie4up||ns6up) {
        snowIE_NS6();
}
// End -->
</script>
</body></html>


NIH DIA HASILNYA


Read more »
By at No comments:
Labels: , , , , ,

Thursday, 4 October 2018

Pesantren Istana Mulia Cara dan Sarana Menjadi Pemimpin Sholeh & Pengusaha Dermawan, Mau?

gratis , keren
Pesantren Istana Mulia Cara dan Sarana Menjadi Pemimpin Sholeh & Pengusaha Dermawan, Mau?
By at No comments:
Labels: , , ,

Wednesday, 26 September 2018

membetuk paragraf

html , javascript
membetuk paragraf
. membetuk paragraf
pada dasarnya setiap informasi berupa teks dalam halaman web berbasis html merupakan script ditulis pada bagian body jika anda menuliskan sebuah string yang cukup panjang
<html>
<head>
<title>mencetak halaman web dengan paragraf </title>
</head>
<body>
<p>selamat malam untuk para calon web master , kali ini saya akan mebahas tentang bagai mana cara mengkoneksikan database melalui dreamweaver, disini saya menggunakan cs 5, di karenakan kebanyakan teman-teman saya menggunakan cs5. ok untuk mempersingkat waktu mari kita mulai belajar bersama pada malam ini.
<p>sekian dan terimakasih. salam semangat untuk kawan-kawan ku yang sedang berjuang untuk menghadapi ujikom
</body>
</html>
2.garis horizotal
untuk membuat garis horizontal atau mendatar pada halaman web, anda dapat menggunakan tag<hr>
contoh;<html>
<head>
<title>menmbuat horizontal</title>
</head>
<body>
kalimat ini mendatar<hr>
</body>
</html>
Read more »
By at No comments:
Labels: , ,

FORMAT TEKS HALAMAN WEB

html , javascript
FORMAT TEKS HALAMAN WEB

FORMAT TEKS HALAMAN WEB
STRUKTUR DASAR HTML
S
Eperti telah dijelaskan sebelumnya bahwa HTML(hypertext markup langguage) merupakan file teks biasa dengan ekstensi .htm atau .html yang terdiri atas script perogram dengan aturan tertentu.untuk mendukung pembelajaran pada bab ini komputer sudah harus terpasang HTML EDITOR seperti : note pad ,notepad++,sublime text,word pad,atau editor lainya seperti macromedia dreamwever dan mmicrosoft fontpage.
1.         Elemen halaman
Dalam memberikan nama dokumen web berbasisi HTML mengunkan editor teks Note pad sebaiknya selalu memilih ekstensi ganda sehingga dideteksi sebagai dokumen teks biasa
Elemen html meliputi: head ,body,title,link,text,paragraph,list, setiap elemen ditandai dengan sebuah simbol tag  yang berbentuk”<” sebagai tanda awal penulisan elemen “>”
<tag awal_nama_elemen_>
“isis script program html”
</tag_akhir_nama_elemen>


Tag awal disimbolkan dengan tanda <nama_elemen)sedangkan tag akhir disimbolkan dengan </nama_eleme> contohnya adalah sebagai berikut
·          Untuk mencetak garis horizontal menggunakan tag<hr>
·          Untuk mencetak generasi selanjutnya menggunakan tag <br>
·          Penomoran sebuah daftar teks menggunakan list sistem dengan tag <Li>
·          Pembuatan format teks bentuk paragraph menggunakan tag <p>


<html>
<head>
<title> judul situs</title>
</head>
<body>
Isi halaman web
</body>
</HTML


2.         Bagian head
Pada dasarnya,dokumen web berbasis HTML hanya memiliki dua bagia pokok,yaitu bagian head dan bagian head dan bagian body
Perhatikan contoh script berikut
·           <head>
tag awal head di gunakan sebagai awal penanda script bagian head html
·           <title>
Tag awal title digunakan sebagai awal tanda judul halaman web
·           Ini adalah judul halaman
Judul halaman web akan ditampilkan pada web browser
·           </title>
Tag akhir title
·           </head>
Tag akhir head
3.         Bagian body
pada bagian body semua script perogram html akan diterjemahkan menjadi bentuk informasi pada halaman web,baik berupa teks,audio,vidio,gambardan animasi.
Yang selalu di diawali dengan tag
 <body> dan diakhiri </body>
<body>halaman </body>


4.         Mengganti baris
Script program HTMl yang ditulis pada bagian body aka dicetak memanjang dalam satu baris keyika diatmpilkan dalam satu baris,oleh karena itu diperlukan script tambahan untuk mencetak pada baris selanjutnya dengan tag <br>


<html>
<head>
<title>mencetak halaman web dengan br</title>
</head>
<body>
Nis : 123456<br>
Nama : <br>
</body>
</html>

Read more »
By at No comments:
Labels: , , , ,

Monday, 24 September 2018

HALAMAN WEB

belajar , keren
HALAMAN WEB
Sebuah halaman web dibagi menjadi dua macam sebagai berikut

  1. web statis 
         w eb statis adalah sebuah output berupa halaman web dengan konten dari web tersebut tidak di ubah ,dihapus,atau ditambah dari segi pengguna.interaksi yang terjadi pada web browser dengan pengguna hanyalah peroses pembacaan isi konten dari halaman.untuk melakukan halaman perubahan konten halaman

      2. web dinamis                                                                                                                                                berbeda dengan web statis, web dinamis sangat fleksibel dalam proses menampilkan informasi pada halamannya seorang pengguna dengan hak akses tertentu bisa mengedit menambah ,bahkan menghapus isi konten halaman suatu web bisanya web dinamis diintegrasikan dengan sistem data base dalam pengaturan kontenya.dalam satu frame halaman web bisa terdiri atas beberapa file web yang saling berkaitan satu sama lainya

berikut ini beberapa perbedaaan mendasar antara web statis dibandingkan dengan web dinamis

  1. berbasis data base                                                                                                                               web dinamis biasanya menggunakan sistem data baseuntuk melakukan perubahan perubahan yang terjdi pada halaman web.perubahan tersebut akan disimpan dalam sebuah data base sehingga informasi yang ditampilkan selalu terupdate,adapun web statis dalam menampilkan informasi masih bersifat tetap dan tidak akan berubah sema secript pemrograman halaman webnya tidak diubah 
  2. interface yang lebih interaktif                                                                                                            tampilan antar muka dalam web dinamis dapat diatur mengikuti aturan tertentu berdasarkan data  yang telah disimpan dalam data base tanpa harus mengubah kode perogram webnya terlebih dahulu,adapun web statis harus mengubah kode perogramnya terebih dahulu untuk mendapatkan perubahan tampilan .
  3. bahasa pemrograman                                                                                                                           script pemrograman web statis biasanya menggunakan struktur dokumen berbasis HTML dengan kombinasi CSS adapun pada web dinamis sudah menggunakan bahasa pemrograman seperti php,perl,javascript,asp,jsp dan ajax
berdasarkan peroses pemrograman ,web dibedakan menjadi dua sebagai berikut
  1. client side programing                                                                                                                        model pemrograman ini merancang layout halaman web dan menulis script pemrogramanya agar menjadi sebuah halaman web yang menampilkanya informasi secara utuh.hasil pemrograman web tersebut ketika request oleh klien akan langsung dikirim ke mesin pengguna  tanpa melalui web server.berikut ini salah satu contoh pemrograman yang digunakan untuk client side programing 
  • HTML(hypertext markup langguage)
  • CSS(cascading style sheets)
  • javascript
  • XML(extensible markup langguage) 
      2.server side programing  
            teknik server side programing menggunakan piranti server untuki menerjemahkan script program yang telah dirancang menjadi suatu bentuk halaman web sehingga dapat dibuka dan dioperasikan pada sisiklienya .keunggulan teknik ini adalah kemungkinan user untuk membuka dan memodifikasika menimalkanya terjadinya penyerangan  yang berakibat website rusak.
Read more »
By at No comments:
Labels: , , , , , ,