Friday, September 8, 2017

Published 9/08/2017 03:22:00 PM by with 0 comment

Sejarah Website dan pengertian WWW



1.SejarahLahirnya WEB
Tahun 1993, Tim Berners-Lee dan peneliti lain di European Particle Physics Lab (Consei European pour la Recherche Nucleaire / CERN) di Geneva, Swiss mengembangkan suatu cara untuk men-share data antarkoleganya menggunakan sesuatu yang disebut dengan hypertext. Pemakai di CERN dapat menampilkan dokumen pada layar komputer dengan menggunakan software browser baru.

Kode-kode khusus disisipkan ke dalam dokumen elektronik ini, memungkinkan pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada layar dengan hanya memilih sebuah hyperlink.

Kemampuan internet dimasukkan ke dalam browser ini sehingga untuk berpindah dari satu dokumen ke dokumen lain, tidak lagi dari satu komputer saja, tetapi dapat meloncat ke dokumen lain yang letaknya pada komputer remote.

Seorang peneliti dapat juga mengirimkan sebuah file dari komputer remote ke sistem lokalnya, atau log in ke dalam suatu sistem remote hanya dengan mengklik hyperlink, tidak perlu melalui mekanisme FTP atau Telnet. Jalan pintas CERN digunakan sebagai dasar dari yang disebut sekarang dengan World Wide Web dan berikut server dan browser webnya.

Sekarang ini, CERN telah kembali pada misi awalnya yaitu melakukan penilitian pada fisika partikel sehingga hal yang berkaitan dengan web telah diserahkan kepada World Wide Web Consortium (W3C) yang merupakan badan resmi yang membuat standar web dan dibentuk pada Oktober 1994.


2.Pengertian WWW 
World Wide Web (WWW atau disingkat W3, atau umumnya dikenal sebagai web) adalah sistem dokumen hypertext yang saling berhubungan yang diakses melalui Internet. Dengan web browser, kita dapat melihat halaman web yang mungkin berisi teks, gambar, video, dan multimedia lainnya.WWW juga dapat diartikan sebagai semuasumber daya dan pengguna di internet yang menggunakan Hypertext Transfer Protocol (HTTP).

Pengertian WWW dari World Wide Web Consortium (W3C) (W3C yaitu suatu komunitas internasional yang mengembangkan Web):
“World Wide Web adalah jaringan informasi alam semesta yang dapat diakses dan merupakan perwujudan dari pengetahuan manusia.”

3. Pengertian HTML

Pengertian HTML adalah bahasa yang digunakan untuk membuat halaman web yang memungkinkan teks, grafik, dan informasi lainnya dilihat melalui browser. Dalam bentuk paling sederhana, HTML terdiri atas serangkaian perintah yang digunakan mengidentifikasi judul, ukuran besar font, warna, dan link ke situs lain dimasukkan kedalam desain halaman web. Dalam penggunaan konvesional, sebagian besar pengguna tidak akan melihat perintah-perintah ini karena memang tersembunyi didalam presentasi layar akhir. Pengguna dapat melihat struktur HTML webpage tertentu dengan masuk ke halama itu kemudian memilih <view> lau <source> dari toolbar dibagian atas layar.

4. Pengertian Web Browser danContoh Software
Web Browser adalahsuatu program atau software yang digunakanuntukmenjelajahi internet atauuntukmencariinformasidarisuatu web yang tersimpandidalamkomputer. Awalnya, web browser berorientasipadateksdanbelumdapatmenampilkangambar.Namun, web browser sekarangtidakhanyamenampilkangambardantekssaja, tetapijugamemutar file multimedia seperti video dansuara. Web browser jugadapatmengirimdanmenerima email, mengelola HTML, sebagai input danmenjadikanhalaman web sebagaihasil output yang informative.



      Denganmenggunakan web browser, parapengguna internet dapatmengaksesberbagaiinformasi yang terdapat di internet denganmudah.

FungsiWeb Browser :

Untukmenampilkandanmelakukaninteraksidengandukumen-dokumen yang disediakanoleh web server.


ContohWeb Browser :

1. Mozilla Firefox



2. Google Chrome



3. Internet Explorer



4. Opera





Web server merupakan software yang memberikan layanan data yang berfungsi menerima permintaan HTTP atau HTTPSdari klien yang dikenal dengan browser web dan mengirimkan kembali hasilnya dalam bentuk halaman - halaman web yang umumnya berbentuk dokumen HTML.

5. PENGERTIAN WEB SERVER

Web Server  adalah suatu server yang memberikan service (layanan) kepada klien yang meminta informasi berkaitan dengan web. Web server sendiri terdiri dari dua komponen. yang pertama adalah komputer itu sendiri dan software web server yang dipakainya. jadi dapat diambil kesimpulan mesin(komputer) apapun bisa saja menjadi web server asalkan software web server tersedia di mesin(komputer) itu. salah satu software web server yang tersedia adalah Apache, tapi selain itu masih banyak lagi web server lainnya seperti ISS, Xitami, dll.



     Contoh Web Server:

Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server,MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Programini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya.

  6.Pengertian Web Statis
      Web Statis adalah sebuah website dimana tampilan halamannya tidak berubah-ubah. Website statis ini biasanya jarang di update/diperbaharui, baik isi maupun tampilannya. Kalaupun di update, itu sangat jarang dan dalam waktu-waktu tertentu saja. Biasanya website statis ini tidak menyediakan kolom untuk berkomentar bagi para pengunjungnya. Website statis biasanya dipergunakan untuk website company profile, personal profile, penawaran produk.

      Kelebihan:

1.Tidak perlu keahlian pemrograman untuk membuat halaman statis.
2.Dapat dilihat langsung oleh web browser tanpa membutuhkan aplikasi server.
3.Lebih mudah untuk website development menggunakan bahasa pemograman HTML.
Kekurangan:
1.Tampilanya kurang menarik.
2.Kontennya statis,tidak berubah-ubah.
3.Terbatas dalam interaksi dengan klien.
4.Tidak menggunakan database.
     5.Tidak menggunakan pemograman PHP di server.

7. Pengertian Web Statis
Web Dinamis adalah kebalikan dari website statis. Website dinamis berarti halaman dan isinyapun dapat berubah– ubah. Kebanyakan website saat ini adalah website dinamis karena isinya dapat di update setiap hari. Sebagai contohnya adalah website-website berita, blog, tutorial, situs social networking, dll.

      Kelebihan:

1.Tampilanya menarik.
2.Konten dan layout dapat berubah-ubah.
3.Menggunakan dynamic html (DHTML).
5.Menggunakan pemograman server untuk mengatur perubahan data.
6.Dapat mengubah CMS untuk mengubah konten website.
7.Dapat menggunakan database untuk menyimpan kontennya.
Kekurangan:
1.Lebih kompleks sehingga sulit dalam pencarian search engine.

   8. Perbedaan Web Statis dan Web Dinamis
  1. Interaksiantarapengunjung dan pemilik web
    Dalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung dengan pemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjung dengan pemilik web seperti memberikan komentar, transaksi online, forum, dll.



  1. Bahasa Script yang digunakan
    Web statis hanya menggunakan HTML saja, atau paling tidak bisa ditambah dengan CSS. Sedangkan web dinamis menggunakan bahasa pemrograman web yang lebih kompleks seperti PHP, ASP dan
     JavaScript.



  1. Penggunaan DataBase
    Web statis tidak menggunakan database karena tidak ada data yang perlu disimpan dan diproses. Sedangkan web dinamis menggunakan database seperti MySQL, Oracle, dll untuk menyimpan dan memroses data.



  1. Konten
    Konten dalam web statis hanya diberikan oleh pemilik web dan jarang di-update, sementara konten dalam web dinamis bisa berasal dari pengunjung dan lebih sering di-update. Konten dalam web dinamis bisa diambil dari database sehingga isinya pun bisa berbeda-beda walaupun kita membuka web yang sama.
Read More
      edit

Thursday, September 7, 2017

Published 9/07/2017 03:50:00 PM by with 0 comment

Cara membuat form keren menggunakan CSS

Nah untuk tutorial kali ini kita akan membahas tentang cara membuat form menggunakan css, ya css berguna untuk memperindah tampilan website tapi ditutorial ini hanya form biasa dan belum di sambungkan dengan php .

Untuk  login form dengan menambahkan validasi mungkin di tutorial berikutnya dan untuk mempersingkat waktu maka kita mulai saja tutor. Yuk simak gusy atau teman - teman bisa langsung DOWNLOAD

1. Pertama buat file html untuk namanya bebas ,misal index.html dan masukan script di bawah ini

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Simple Form with css</title>



</head>


<body>

<div id="wrapper">


                <form name="login-form" class="login-form" action="" method="post">


                                <div class="header">

                                <h1>Login Form</h1></center>

                                <span>Login pake form keren</span>

                                </div>


                                <div class="content">

                                <input name="username" type="text" class="input username" placeholder="Username" />

                                <div class="user-icon"></div>

                                <input name="password" type="password" class="input password" placeholder="Password" />

                                <div class="pass-icon"></div>                  

                                </div>


                                <div class="footer">

                                <input type="submit" name="submit" value="Masuk" class="button" />

                                <input type="submit" name="submit" value="Daftar" class="register" />

                                </div>


                </form>


</div>

<div class="gradient"></div>


</body>

</html>

Jalan kan file di atas Dan Hasilnya sepert ini karna belum ditambahkan CSS 



2. Kedua buat file CSS nya untuk namayna bebas,misalnya style.css dan masukan script dibawah ini

::selection {

        color: #fff;

        background: #f676b2; /* Safari */

}

::-moz-selection {

        color: #fff;

        background: #f676b2; /* Firefox */

}

* {

        margin: 0;

        padding: 0;

        border: none;

        outline: none;

}

body {

        background: url('http://www.demo.amitjakhu.com/login-form/images/bg.png');

        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

        font-weight:300;

        text-align: left;

        text-decoration: none;

        height: 500px;

}

#wrapper {

        /* Center wrapper perfectly */

        width: 300px;

        height: 400px;

        margin: 70px auto;

}

/* Download Button (Demo Only) */

.download {

        display: block;

        position: absolute;

        float: right;

        right: 25px;

        bottom: 25px;

        padding: 5px;    

        font-weight: bold;

        font-size: 11px;

        text-align: right;

        text-decoration: none;

        color: rgba(0,0,0,0.5);

        text-shadow: 1px 1px 0 rgba(256,256,256,0.5);

}

.download:hover {

        color: rgba(0,0,0,0.75);

        text-shadow: 1px 1px 0 rgba(256,256,256,0.5);

}

.download:focus {

        bottom: 24px;

}

.gradient {

        /* Center Positioning */

        width: 600px;

        height: 600px;

        position: fixed;

        left: 50%;

        top: 50%;

        margin-left: -300px;

        margin-top: -300px;

        z-index: -2;

        /* Fallback */

        background-image: url(http://www.demo.amitjakhu.com/login-form/images/gradient.png);

        background-repeat: no-repeat;               

        /* CSS3 Gradient */

        background-image: -webkit-gradient(radial, 0% 0%, 0% 100%, from(rgba(213,246,255,1)), to(rgba(213,246,255,0)));

        background-image: -webkit-radial-gradient(50% 50%, 40% 40%, rgba(213,246,255,1), rgba(213,246,255,0));

        background-image: -moz-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));

        background-image: -ms-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));

        background-image: -o-radial-gradient(50% 50%, 50% 50%, rgba(213,246,255,1), rgba(213,246,255,0));

}

/*******************

LOGIN FORM

*******************/

.login-form {

        width: 300px;

        margin: 0 auto;

        position: relative;

        background: #f3f3f3;

        border: 1px solid #fff;

        border-radius: 5px;        

        box-shadow: 0 1px 3px rgba(0,0,0,0.5);

        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

}

.login-form .header {

        padding: 40px 30px 30px 30px;

}

.login-form .header h1 {

        font-family: 'Bree Serif', serif;

        font-weight: 300;

        font-size: 28px;

        line-height:34px;

        color: #414848;

        text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

        margin-bottom: 10px;

}

.login-form .header span {

        font-size: 11px;

        line-height: 16px;

        color: #678889;

        text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

}

.login-form .content {

        padding: 0 30px 25px 30px;

}

/* Input field */

.login-form .content .input {

        width: 188px;

        padding: 15px 25px;

        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

        font-weight: 400;

        font-size: 14px;

        color: #9d9e9e;

        text-shadow: 1px 1px 0 rgba(256,256,256,1.0);

        background: #fff;

        border: 1px solid #fff;

        border-radius: 5px;        

        box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);

        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);

        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);

}

/* Second input field */

.login-form .content .password, .login-form .content .pass-icon {

        margin-top: 25px;

}

.login-form .content .input:hover {

        background: #dfe9ec;

        color: #414848;

}

.login-form .content .input:focus {

        background: #dfe9ec;

        color: #414848; 

        box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);

        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);

        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);

}

.user-icon, .pass-icon {

        width: 46px;

        height: 47px;

        display: block;

        position: absolute;

        left: 0px;

        padding-right: 2px;

        z-index: -1;        

        -moz-border-radius-topleft: 5px;

        -moz-border-radius-bottomleft: 5px;

        -webkit-border-top-left-radius: 5px;

        -webkit-border-bottom-left-radius: 5px;

}

.user-icon {

        top:153px; /* Positioning fix for slide-in, got lazy to think up of simpler method. */

        background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/user-icon.png) no-repeat center;          

}

.pass-icon {

        top:201px;

        background: rgba(65,72,72,0.75) url(http://www.demo.amitjakhu.com/login-form/images/pass-icon.png) no-repeat center;

}

.content input:focus + div{

        left: -46px;

}

/* Animation */

.input, .user-icon, .pass-icon, .button, .register {

        transition: all 0.5s ease;

        -moz-transition: all 0.5s ease;

        -webkit-transition: all 0.5s ease;

        -o-transition: all 0.5s ease;

        -ms-transition: all 0.5s ease;

}

.login-form .footer {

        padding: 25px 30px 40px 30px;

        overflow: auto;

        background: #d4dedf;

        border-top: 1px solid #fff;          

        box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);

        -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);

        -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.15);

}

/* Login button */

.login-form .footer .button {

        float:right;

        padding: 11px 25px;

        font-family: 'Bree Serif', serif;

        font-weight: 300;

        font-size: 18px;

        color: #fff;

        text-shadow: 0px 1px 0 rgba(0,0,0,0.25);

        background: #56c2e1;

        border: 1px solid #46b3d3;

        border-radius: 5px;

        cursor: pointer;

        box-shadow: inset 0 0 2px rgba(256,256,256,0.75);

        -moz-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);

        -webkit-box-shadow: inset 0 0 2px rgba(256,256,256,0.75);

}



.login-form .footer .button:hover {

        background: #3f9db8;

        border: 1px solid rgba(256,256,256,0.75);             

        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);

        -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);

        -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);

}

.login-form .footer .button:focus {

        position: relative;

        bottom: -1px;

        background: #56c2e1;   

        box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);

        -moz-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);

        -webkit-box-shadow: inset 0 1px 6px rgba(256,256,256,0.75);

}

/* Register button */

.login-form .footer .register {

        display: block;

        float: right;

        padding: 10px;

        margin-right: 20px;

        background: none;

        border: none;

        cursor: pointer;

        font-family: 'Bree Serif', serif;

        font-weight: 300;

        font-size: 18px;

        color: #414848;

        text-shadow: 0px 1px 0 rgba(256,256,256,0.5);

}

.login-form .footer .register:hover {

        color: #3f9db8;

}

.login-form .footer .register:focus {

        position: relative;

        bottom: -1px;

}

23. Ketiga sambungakan file HTML DAN CSS  nya dengan cara menambahkan link yang mengarah ke file css nya dengan script di bawah ini di bagian header nay




              <link rel="stylesheet" href="css1.css">



 
   4. Jalankan File index.html nya dan hasilnya??


nah gimana sob hasilnya kerenkan, terimakasih sudah berkunjung di blog kami dan jangan lupa beri komentar dan like nya ya dan lihat tutor lainnya hanya di di  Mudabeda


 
Read More

      edit