Tugas Menginput Data ke Database My SQL dengan PHP

Tugas Menginput Data ke Database My SQL dengan PHP

cara membuat aplikasi siswa sederhana, berikut penjelasan yang akan saya uraikan tahap demi tahap

1. Input Data Di Mysql Dengan PHP

"Menginput Data ke Database MYSQL Dengan  PHP"

setelah selesai buat koneksi ketik pada text editor kesayangan anda

<?
mysql_connect("localhost","root","");
mysql_select_db("db_bt");
?>

simpan dengan nama koneksi.php (disini pass database saya 1

Setelah database selesai dibuat. Sekarang kita akan membuat file "input_data.php" yang berguna sebagai form penginputan data :
berikut kode nya :

ketik pada text editor anda

<form name="form1" method="post" action="aksi_input_data.php">
  <table width="400" border="0" align="center" cellpadding="1" cellspacing="1" bordercolor="#00FF00" bgcolor="#33CC00">
    <tr bgcolor="#CCFFCC">
      <td height="50" colspan="2"><div align="center">INPUT DATA SISWA </div></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="40">Nis </td>
      <td>:
      <input name="nis" type="text" id="nis"></td>
    </tr>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="40">Nama </td>
      <td>:
      <input name="nama" type="text" id="nama"></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="40">Alamat</td>
      <td>:
      <input name="alamat" type="text" id="alamat"></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="40">Jenis Kelamin </td>
      <td>:
          <select name="jk" id="jk">
            <option value="Laki-Laki" selected>Laki-Laki</option>
            <option value="Perempuan">Perempuan</option>
        </select></td>
    </tr>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="40">Umur </td>
      <td>:
      <input name="umur" type="text" id="umur"></td>
    </tr>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="40">Kelas </td>
      <td>:
      <input name="kelas" type="text" id="kelas"></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td>&nbsp;</td>
      <td height="50"><input type="submit" name="Submit" value="Simpan"></td>
    </tr>
  </table>
</form>

beri  nama input_data.php

ini hasilnya 

 Setelah itu, Kita buat Pemrosesnya "aksi_input_data.php"dengan menggunakan kode php.


<?php
mysql_connect("localhost","root","1");
mysql_select_db("db_bt");


$simpan="INSERT INTO tbl_input SET
        nis='$_POST[nis]',
        nama='$_POST[nama]',
        alamat='$_POST[alamat]',
        jk='$_POST[jk]',
        umur='$_POST[umur]',
        kelas='$_POST[kelas]'";

mysql_query($simpan);

 echo "data berhasil disimpan ";
 echo "<br>";
 echo "<a href=input_data.php>back</a>";
?>

simpan dengan nama aksi_input_data.php

Pada khasus input data dengan PHP yang perlu diperhatikan ialah.. bahwa query yang diguanakan untuk membuat input data ialah :

mysql_query("INSERT INTO nama_tabel (nama field yang didatabase) Values(nama field yang ada di form Input data)");

nah.. disini menggunakan "Values" ,, bisa juga menggunakan "SET" Untuk artikelnya anda bisa lihat Tutorial Input Data ke Database Mysql Dengan PHP) , semua sama saja terserah anda menggunakan yang mana..

2. Membuat Tampil Data Dengan PHP

copas code di bawah ini

<table width="400" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#000000" celpading="2" celspacing="1" >
  <tr bgcolor="#CCFFFF">
    <td><div align="center"><strong>No</strong></div></td>
    <td><div align="center"><strong>NIS</strong></div></td>
    <td><div align="center"><strong>Nama</strong></div></td>
    <td><div align="center"><strong>Alamat</strong></div></td>
    <td><div align="center"><strong>JK</strong></div></td>
    <td><div align="center"><strong>Umur</strong></div></td>
    <td><div align="center"><strong>Kelas</strong></div></td>
    <td><div align="center"><strong>Aksi</strong></div></td>
  </tr>
  <?php

      mysql_connect('localhost','root','1');
      mysql_select_db('db_bt');
  
      $tampil="select * from tbl_input";
      $qryTampil=mysql_query($tampil);
      while ($dataTampil=mysql_fetch_array($qryTampil)) {
     $no++
     ?>

   <tr bgcolor="#FFFFFF">
    <td><?php echo $no ; ?></td>
    <td><?php echo $dataTampil['nis']; ?></td>
    <td><?php echo $dataTampil['nama']; ?></td>
    <td><?php echo $dataTampil['alamat']; ?></td>
    <td><?php echo $dataTampil['jk']; ?></td>
    <td><?php echo $dataTampil['umur']; ?></td>
    <td><?php echo $dataTampil['kelas']; ?></td>
    <td><div align="center"><a href="delete.php?id=<?php echo $dataTampil['id'] ; ?>">Delete</a> | <a href="Edit_data.php?id=<?php echo $dataTampil['id']; ?>">Edit </a></div></td>

  </tr>
    <?php } ?>
</table>

simpan dengan nama tampil_data.php

Pada khasus  ini.. untuk menampilkan data dengan php yang perlu di perhatikan dan diingat ialah query yang digunakan untuk menampilkan data dari database dengan PHP yaitu :

mysql_query("SELECT * FROM nama_tabel");

3. Menghapus Data Dengan PHP 

<?php

mysql_connect('localhost','root','1');
    
mysql_select_db('db_bt');
    
    
    
$id=$_GET['id'];
    
$delete="Delete from tbl_input Where id='$id'";
    
mysql_query($delete) or die ("Error tu");
    
    
    
echo "<center><h3>Data berhasil di hapus</h3></center>";
    
    
    
?>

simpan dengan nama delete.php

Query yang digunakan untuk  menghapus data yang ada di database ialah :

mysql_query("DELETE FROM nama_tabel WHERE statement")

"statement di atas ialah kondisi penghapusannya .

4. Membuat Edit dan Update Data Dengan PHP

copas  code di bawah ini 

    <form name="form1" method="post" action="aksi_edit_data.php">
      <table width="400" border="0" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFF99" bgcolor="#FF0000">
        <tr bgcolor="#FFFFCC">
          <td height="50" colspan="2"><div align="center">EDIT DATA</div></td>
        </tr>
     <?php
      mysql_connect('localhost','root','1');
      mysql_select_db('db_bt');
      
      $sqlTampil="select * from tbl_input Where id='$_GET[id]'";
      $qryTampil=mysql_query($sqlTampil);
      $dataTampil=mysql_fetch_array($qryTampil);
     ?>
    <tr bgcolor="#FFFFFF">
          <td height="40">Nis </td>
          <td>:
          <input name="nis" type="text" id="nis" value="<?php echo $dataTampil['nis']; ?>"></td>
        </tr>
        <tr bgcolor="#FFFFFF">
          <td height="40">Nama </td>
          <td>:
          <input name="nama" type="text" id="nama" value="<?php echo $dataTampil['nama']; ?>"></td>
        </tr>
        <tr bgcolor="#FFFFFF">
          <td height="40">Alamat</td>
          <td>:
          <input name="alamat" type="text" id="alamat" value="<?php echo $dataTampil['alamat']; ?>"></td>
        </tr>
        <tr bgcolor="#FFFFFF">
          <td height="40">Jenis Kelamin </td>
          <td>: 
            <input name="jk" type="text" id="jk" value="<?php echo $dataTampil['jk']; ?>">
            <input name="id" type="hidden" id="id" value="<?php echo $dataTampil['id']; ?>"></td>
        </tr>
    <tr bgcolor="#FFFFFF">
          <td height="40">Umur </td>
          <td>:
          <input name="umur" type="text" id="umur" value="<?php echo $dataTampil['umur']; ?>"></td>
        </tr>
    <tr bgcolor="#FFFFFF">
          <td height="40">Kelas </td>
          <td>:
          <input name="kelas" type="text" id="kelas" value="<?php echo $dataTampil['kelas']; ?>"></td>
        </tr>  
        <tr bgcolor="#FFFFFF">
          <td>&nbsp;</td>
          <td height="50"><input type="submit" name="Submit" value="Simpan"></td>
        </tr>
      </table>
    </form>  

berinama edit_data.php

kemudian bnuat aksi_data.php

copas code di bawah ini

<?php
    mysql_connect('localhost','root','1');
    mysql_select_db('db_bt');
    
    $update="UPDATE tbl_input SET
        nis='$_POST[nis]',
            nama='$_POST[nama]',
            alamat='$_POST[alamat]',
            jk='$_POST[jk]',
        umur='$_POST[umur]',
        kelas='$_POST[kelas]', WHERE id='$_POST[id]'";
    mysql_query($update);
    
    echo "<center>Data Berhasil Di Update<center>";
    echo "<center><h3><a href=tampil_data.php>Back Tampil Data</a></h3></center>";
?>

simpan dengan nama aksi_edit.php

Pada khasus mengedit data di mysql dengan php yang perlu di perhatikan ialah.. query yang digunakan dan statement nya :

mysql_query("Update nama_tabel SET statement ");

Tabel Zebra

Script html :
<
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<link rel="stylesheet" href="dd.css" type="text/css"/>
<p><center><table id="table-a" height="50%">
    <thead>
    <tr><th>No</th><th>Nama</th>    <th>NIM</th></tr>
    </thead>
    <tbody>
    <tr><td>1.</td><td>Arif Setya N</td><td>L200130177</td></tr>
    <tr><td>2.</td><td>-</td><td>-</td></tr>
    <tr><td>3.</td><td>-</td><td>-</td></tr>
    </tbody>
</table>
<body>
</body>
</html>


script css :

#table-a{  font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      width: 500px;
      text-align: center;
      border-collapse: collapse;}
#table-a th{ font-size: 13px;
      font-weight: normal;
      padding: 8px;
      background: #FF3E29;
      border-top: 4px solid #0099FF;
      border-bottom: 1px solid #00CCFF;
      color: #FF3E29;}
#table-a td{ padding: 8px;
      background: #33CCFF;
      border-bottom: 1px solid #0099FF;
      color: #FF3E29;
      border-top: 1px solid transparent;}
#table-a tr:hover td{   background: #FF0000;
       color:#FF3E29;}

Dropdown menu

html dan css internalnya :

<html>
<head>
<style type="text/css">
.dropmenu {
 text-align:center;
 border-radius: 20px;
 background: #000000;
    height: 30px;
 width:498px;
    list-style-type: none;
    margin: inherit;
    padding: 0px;
}
.dropmenu li {
    border-right: thick;
    float: left;
    height: 30px;
 width: 166px;
}
.dropmenu li a {
    color: #333333;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover {
 position: relative;
 text-align:center;
}
.dropmenu li:hover a {
 text-decoration: blink;
 color: #00FF00;
}
.dropmenu li:hover ul {
    left: 0px;
    padding: 0px;
    top: 30px;
    width: 10px;
 height: 30px;
}
.dropmenu li:hover ul li {
 border: none;
 height: 18px;
 color: #0099FF;
}
.dropmenu li:hover ul li a {
    background-color: #E6E6FAs;
    border: 1px solid transparent;
 border-radius:20px;
    color: #009900;
    display: block;
    font-size: 11px;
    height: 20px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: #333333;
    border: solid 1px #00FF00;
    color: #00FF00;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#a">Sub Menu 1</a></li>
    <li><a href="#b">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#c">Sub Menu 1</a></li>
    <li><a href="#d">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#e">Sub Menu 1</a></li>
    <li><a href="#f">Sub Menu 2</a></li>
    </ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
.dropmenu {
 text-align:center;
 border-radius: 20px;
 background: #000000;
    height: 30px;
 width:498px;
    list-style-type: none;
    margin: inherit;
    padding: 0px;
}
.dropmenu li {
    border-right: thick;
    float: left;
    height: 30px;
 width: 166px;
}
.dropmenu li a {
    color: #333333;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover {
 position: relative;
 text-align:center;
}
.dropmenu li:hover a {
 text-decoration: blink;
 color: #00FF00;
}
.dropmenu li:hover ul {
    left: 0px;
    padding: 0px;
    top: 30px;
    width: 10px;
 height: 30px;
}
.dropmenu li:hover ul li {
 border: none;
 height: 18px;
 color: #0099FF;
}
.dropmenu li:hover ul li a {
    background-color: #333333;
    border: 1px solid transparent;
 border-radius:20px;
    color: #009900;
    display: block;
    font-size: 11px;
    height: 20px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: #333333;
    border: solid 1px #00FF00;
    color: #00FF00;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#a">Sub Menu 1</a></li>
    <li><a href="#b">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#c">Sub Menu 1</a></li>
    <li><a href="#d">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#e">Sub Menu 1</a></li>
    <li><a href="#f">Sub Menu 2</a></li>
    </ul>
</li>
</ul>
</body>
</html>
<html>
<head>
<style type="text/css">
.dropmenu {
 text-align:center;
 border-radius: 20px;
 background: #000000;
    height: 30px;
 width:498px;
    list-style-type: none;
    margin: inherit;
    padding: 0px;
}
.dropmenu li {
    border-right: thick;
    float: left;
    height: 30px;
 width: 166px;
}
.dropmenu li a {
    color: #333333;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover {
 position: relative;
 text-align:center;
}
.dropmenu li:hover a {
 text-decoration: blink;
 color: #00FF00;
}
.dropmenu li:hover ul {
    left: 0px;
    padding: 0px;
    top: 30px;
    width: 10px;
 height: 30px;
}
.dropmenu li:hover ul li {
 border: none;
 height: 18px;
 color: #0099FF;
}
.dropmenu li:hover ul li a {
    background-color: #333333;
    border: 1px solid transparent;
 border-radius:20px;
    color: #009900;
    display: block;
    font-size: 11px;
    height: 20px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: #333333;
    border: solid 1px #00FF00;
    color: #00FF00;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>
</head>
<body>
<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#a">Sub Menu 1</a></li>
    <li><a href="#b">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#c">Sub Menu 1</a></li>
    <li><a href="#d">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#e">Sub Menu 1</a></li>
    <li><a href="#f">Sub Menu 2</a></li>
    </ul>
</li>
</ul>
</body>
</html>

Sejarah dan Perkembangan CSS

Pada kesempatan kali ini, kami akan membahas tentang CSS 3.  Disini saya akan membahas salah satu nya yaitu sejarah dan perkembangan CSS 3, sebelum saya membahas apa itu css 3 apakah teman-teman sudah mengetahui apa itu CSS? Bilamana teman-teman sudah mengetahui tentang CSS, tidak ada salahnya kita sedikit merefresh ingatan kita tentang sejarah dan pengertian CSS. Dan bila teman-teman ada yang belum tahu apa itu CSS, mari kita sama-sama mempelajari apa itu CSS.

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam.

Sejarah CSS

• CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).

2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan  huruf.

4. Posisi teks, gambar, table dan elemen lainnya.

5. Margin, border dan padiing.

• CSS 2

Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer.

• CSS 3 

CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Pekembangan CSS3 Seperti Apa?
Dari salah satu situs blog yang saya temui mengatakan hasil pengamatan nya pada beberapa situs yang sudah menerapkan CSS3 + HTML5,  ia beranggapan bahwa fungsi jQuery sepenuhnya akan tergantikan oleh CSS3. Perkiraan ke depan, tidak ada lagi web yang menggunakan jQuery karena sizenya lebih besar dibanding CSS3. Bukan cuma jQuery, saat ini penggunaan flash juga mulai terakusisi dengan semakin berkembangnya CSS3. CSS3 merupakan bahasa pemrograman olah digital gambar/citra tingkat tinggi karena dengan CSS3, anda bisa menggambar Tokoh Kartun Doraemon seperti contoh berikut :

Dari contoh di atas, memang terlihat belum semua browser sudah mendukung secara keseluruhan penggunaan CSS3, namun, masing-masing browser sudah melakukan proses perkembangan produk agar bisa mendukung penggunaan CSS3.

Sejarah dan Perkembangan HTML

Pengertian HTML

Hyper Text Markup Language (HTML) adalah sebuah  markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi  halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). 

SEJARAH HTML

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).

HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).

Perkembangan HTML

Pada tahun 1980 IBM menciptakan konsep untuk menempatkan elemen-element yang menandai bagian suatu dokumen seperti judul, alamat, dan isi dokumen. Element itu merupakan sutu program untuk melakukan sebuah pemformatan dokumen.

Bahasa pemograman untuk melakukan sebuah tugas tersebuat markup language atau lebih jelasnya IBM menamai program itu dengan sebutan Generalized Markup language(GML). Konsep ini pada tahun 1986 disetujui oleh ISO(International Standart Organitation) sebagai standart bagi pembuatan dokumen-dokumen dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML(Standart Generalized Markup Language).

HTML versi 1.0

di HTML versi 1.0 kemampuan yang dimilikinya yaitu menampilkan heading, paragraph, hypertext, list, serta cetak tebal, dan miring pada suatu teks. Versi ini mendukung peletakan gambar pada dokumen tanpa memperbolehkan menempatkan tes di sekelilingnya (wrapping).

HTML+

       HTML + adalah satu set ekstensi modular untuk hypertext markup language (HTML), yang digunakan secara luas di World Wide Web. Penggunaan SGML untuk menentukan HTML + memungkinkan penulis untuk membuat dokumen dalam berbagai cara: dengan editor teks, alat authoring SGML dan filter dari format pengolah kata umum seperti Fram-emaker, Microsoft Word dan LaTeX. Makalah ini selesai dengan melihat ekstensi dalam pertimbangan saat ini dan mendorong perdebatan lebih luas mengenai apa yang dibutuhkan untuk bahan bakar tahap berikutnya dalam pengembangan Web.

       

        

Pengantar

       Pada tahun 1450 Johannes Gutenberg dikreditkan dengan menyatukan dua ide: penggunaan logam mati untuk membuat jenis bergerak dan pers untuk mendapatkan tayangan tajam pada lembar kertas. Penemuan pencetakan pada awal usia penemuan besar dipercepat perubahan ekonomi, sosial dan ideologis yang mengantar di dunia modern.

       Media tradisional seperti buku, surat kabar, radio, film dan televisi yang diterbitkan oleh beberapa bagi banyak, sementara telepon terbatas pada satu untuk satu percakapan. World Wide Web adalah radikal media baru, menyatukan hypertext, markup logis dan jaringan global. Web membuatnya sangat mudah bagi siapa saja untuk mempublikasikan informasi kepada orang-orang di mana saja di dunia. Web tumbuh pada tingkat yang sangat cepat - dua kali lipat dalam lalu lintas setiap dua sampai tiga bulan. Pada saat menulis sekitar 400 Gigabytes sedang dilakukan per bulan.

       Sekarang ada tubuh yang besar pengalaman dalam menata kata yang dicetak. Pengalaman itu membawa serta fiksasi dengan halaman yang dicetak. Perkembangan komputer telah diabadikan bahwa fiksasi: perangkat lunak pengolah kata telah dilihat terutama sebagai sarana mempersiapkan dokumen dicetak. Jaringan global yang sekarang membuatnya mudah untuk mendistribusikan informasi elektronik dan waktunya telah tiba untuk menyingkirkan keterbatasan halaman yang dicetak.

Saat ini, banyak format untuk distribusi informasi elektronik mewujudkan pembatasan dari halaman dicetak - dokumen yang rusak menjadi urutan halaman berukuran tetap dan halaman dijelaskan dalam hal tanda yang akan dibuat pada posisi tertentu, biasanya melibatkan bernama font. Ini telah mencegah pertukaran informasi secara nyata. Banyak dari Anda akan telah melihat ini dengan Postscript - untuk beberapa alasan atau lainnya masalah sering terjadi ketika mencoba untuk mencetak kertas Anda hanya diambil melewati net!

       Standard Generalized Markup Language (SGML) diciptakan sebagai solusi untuk masalah ini. Dengan memusatkan perhatian pada unsur-unsur logis dalam dokumen, penerima informasi dibebaskan dari pilihan sering tidak tepat originator. Pengguna dapat mengubah ukuran jendela mereka untuk membuat penggunaan optimal dari layar dan perangkat lunak pencetakan dapat dokumen tata letak untuk mencocokkan ukuran kertas lokal. Manfaat lain dari menggunakan SGML mencakup kemampuan untuk melindungi investasi penyedia informasi dalam menghadapi format proprietary berumur pendek, dan ketersediaan alat untuk authoring dan konversi format. SGML adalah metaformat yang memungkinkan seseorang untuk menentukan berbagai format dokumen. The hypertext markup language HTML dikembangkan sebagai sederhana Format pengiriman non-eksklusif untuk dunia hypertext. HTML + adalah satu set ekstensi modular untuk HTML dan telah dikembangkan sebagai tanggapan terhadap pemahaman yang berkembang dari kebutuhan penyedia informasi. Ekstensi ini termasuk aliran teks di sekitar angka floating, mengisi formulir, tabel dan persamaan matematika.

Browser adalah program untuk melihat dokumen HTML dan sekarang tersedia untuk sebagian besar platform. Yang paling terkenal adalah keluarga Mosaic browser dari US National Center for Supercomputing Applications, dengan browser untuk X11, Windows, dan Macintosh. Browser non-grafis yang tersedia untuk VT100 terminal dll, misalnya Lynx dan Emacs-W3. The penampilan dokumen akan bervariasi dari satu browser ke yang berikutnya sesuai dengan kemampuan masing-masing sistem dan preferensi pengguna.

Saat ini, sebagian besar dokumen yang dibuat dengan editor teks konvensional.Upaya yang du butuhkan untuk mengetik elemen markup dapat di kurangi dengan menggunakan alat pengolahan pasca untuk memastikan bahwa dokumen yang di hasilkan sesuai dengan definisi jenis dokumen HTML (DTD). Penulis juga dapat menggunakan paket pengolah kata umum dan menerapkan filter untuk mengkonversi ke HTML. Filter yang tersedia untuk FrameMaker, LaTeX dan Microsoft Word. Orang lain menggunakan alat SGML standar untuk pembuatan dokumen dan konversi dari format dokumen berbasis SGML proprietary.

       HTML versi 2.0

       di versi ii, penambahan kualitas TML terletak pada kemampuan untuk menampilkan sebuah form pada dokumen. Dengan adanya form ini maka kita dapat memasukkan nama, alamat, serta saran/kritik. 

       HTML versi 3.0

       HTML versi 3.0 menambahkan beberapa fasilitas baru sebagai contoh tabel. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.

Pengantar HTML 3.2

       HTML 3.2 adalah spesifikasi W3C untuk HTML, dikembangkan pada awal `96 bersama-sama dengan vendor termasuk IBM, Microsoft, Netscape Communications Corporation, Novell, SoftQuad, Spyglass, dan Sun Microsystems. HTML 3.2 menambahkan fitur banyak digunakan seperti tabel, applet dan aliran teks di sekitar gambar, sambil memberikan kompatibilitas mundur penuh dengan standar yang ada HTML 2.0.
W3C terus bekerja dengan vendor pada ekstensi untuk fitur aksesibilitas, objek multimedia, scripting, style sheet, tata letak, bentuk, matematika dan internasionalisasi. W3C berencana menggabungkan pekerjaan ini dalam versi lebih lanjut dari HTML.

       HTML sebagai aplikasi SGML

       HTML 3.2 adalah sebuah aplikasi SGML sesuai dengan Standar Internasional ISO 8879 - Standard Generalized Markup Language. Sebagai sebuah aplikasi SGML, sintaks sesuai HTML 3.2 dokumen ditentukan oleh kombinasi dari SGML deklarasi dan definisi jenis dokumen (DTD). Spesifikasi ini mendefinisikan penafsiran dimaksud HTML 3.2 unsur, dan menempatkan kendala lebih lanjut tentang sintaks diizinkan yang dinyatakan tak terkatakan di DTD.
Aturan SGML untuk batas record yang rumit. Secara khusus, akhir record segera setelah tag awal harus dibuang. Sebagai contoh:

<P>

Teks

adalah setara dengan:

Teks <P>

Demikian pula, akhir rekaman segera sebelum tag akhir harus dibuang. Sebagai contoh:

Teks

</ P>

adalah setara dengan:

Teks </ P>

Kecuali dalam teks literal (misalnya PREelemen), HTML memperlakukan urutan bersebelahan karakter spasi sebagai setara dengan karakter spasi tunggal (desimal ASCII 32). Aturan-aturan ini memungkinkan penulis fleksibilitas yang cukup saat mengedit teks yang telah ditandai-up langsung. Perhatikan bahwa revisi masa depan untuk HTML memungkinkan untuk interpretasi karakter tab horizontal (ASCII desimal 9) sehubungan dengan aturan tab didefinisikan oleh style sheet terkait.
Entitas SGML dalam konten PCDATA atau atribut CDATA diperluas oleh parser, misalnya édiperluas untuk ISO Latin-1 karakter desimal 233 (huruf kecil huruf e dengan aksen akut). Ini bisa juga ditulis sebagai karakter entitas bernama, misalnyaé. The & karakter dapat dimasukkan dalam dirinya sendiri menggunakan entitas bernama karakter&.
HTML memungkinkan atribut CDATA untuk tanda kutip memberikan nilai atribut hanya berisi huruf (a sampai z dan A sampai Z), angka (0 sampai 9), tanda hubung (desimal ASCII 45) atau periode (desimal ASCII 46). Nilai atribut dapat menggunakan dikutip ganda atau tunggal tanda kutip (ASCII desimal 34 dan 39 masing-masing). Tanda kutip tunggal dapat dimasukkan dalam nilai atribut ketika nilai dibatasi oleh tanda kutip ganda, dan sebaliknya.
Perhatikan bahwa beberapa agen pengguna memerlukan atribut minimalisasi untuk atribut berikut: COMPACT, ISMAP, DIPERIKSA, Nowrap, NOSHADE dan NOHREF.Para agen pengguna tidak menerima sintaks seperti COMPACT = COMPACT atau ISMAP = ISMAP meskipun ini adalah sah menurut DTD HTML 3.2.
The SGML deklarasi dan DTD untuk digunakan dengan HTML 3.2 diberikan dalam lampiran. Pedoman lebih lanjut untuk HTML parsing diberikan dalam WD-html-lex .

       HTML versi 4.0

       HTML versi 4.0 memuat banyak sekali perubahan dan revisi dari versi sebelumnya. Perubahan ini terjadi di hampirsegala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan  lain-lain.

       Kemudian lahir HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan (18 Desember 1997). HTML versi HTML 4.01 masih standart resmi sampai sekarang ini .

HTML versi 4.01

HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan (18 Desember 1997). HTML versi HTML 4.01 masih standart resmi sampai sekarang ini .

       HTML versi 5

       HTML 5 merupakan perkembangan html generasi saat ini dan merupakan generasi terakhir dan mungkin akan berkembang lagi mengikuti perkembangan jaman. Beberapa fitur baru di HTML 5 seperti berikut:

- Unsur kanvas untuk menggambar.
- Video dan elemen audio untuk media pemutara.
- Element baru, seperti artikel, footer, header, dan navigasi.
- Dukungan lebih baik untuk penyimpanan offline local.
- Kontrol bentuk baru, seperti kalender, tanggal, waktu, email, URL, dan Search.
- Saat ini HTML 5 belum menjadi standart resmi dan masih jarang ada browser memiliki fitur penuh terhadap HTML 5. HTML 5 akan mungkin menjadi standart baru untuk HTML dan XHTML.


Cukup sekian mengenai perkembangan html yang terjadi saat ini.