iSaya-IntelegentSaya: Tugas Web dasar

Tampilkan postingan dengan label Tugas Web dasar. Tampilkan semua postingan

Rabu, 18 Desember 2013

Tugas Pemrigraman Web Dasar

Tugas 1.Menu dropdown

<html>
<title> Hermawan Saputro </title>
<head>
<style>
.tab{
 
 border: 3px solid blue;
 width:20%;
 margin: 50 0 0 300;
 background-color:crome;
 color:Black;
 font-size:20;
 text-decoration:none;
 border-radius:0px;
 }
 
a{text-decoration:none;}
td,tr {
  font-family:Century Gothic, Century Gothic, Century Gothic, sans-serif;
  color:green;

}

.dropv
  {
  padding: 30;
  margin: 5; 
  
  }
.dropv a
  {
  display: inline;
  width: 300px;
  }
.dropv li 
  {
  float:left;
  padding: 0px 10px 5px 0px;
  }
.dropv li ul
  {
  position: absolute;
  background:green; 
  padding: 0px 0px 0px 5px;
  width: 300px;
  right: -9999px;
  }
.dropv li:hover ul 
  {
  border-radius:1px;
  right: auto;
  }
.dropv li ul a 
  {
  border-radius:1px;
  color: blue;
  text-decoration: none;
  display: block;
  }
.dropv li ul a:hover 
  {
  color: red;
  background:yellow;
  }
</style>
</head>
<table class="tab">
 <tr>
 <td>
  <ul class="dropv">
   <li><a href="#">Editing Video</a> 
    <ul>
     <li><a href="#">Sony Vegas</a></li>
     <li><a href="#">Adobe Premiere Pro</a></li>
     <li><a href="#">Adobe After Effect</a></li>
     <li><a href="#">Corel VideoStudio Pro</a></li>
     
    </ul>
 </td>
 <td>
  <ul class="dropv">
   <li><a href="#">Editing Audio</a> 
    <ul>
      <li><a href="#">FL Studio</a></li>
      <li><a href="#">Auiocity</a></li>
      <li><a href="#">Cool Edit Pro</a></li>  
    </ul>
   </li>
  </ul> 
 </td>
    <td>
  <ul class="dropv">
   <li><a href="#">Editing Gambar</a> 
    <ul>
      <li><a href="#">CorelDraw</a></li>
      <li><a href="#">Manga studio</a></li>
      <li><a href="#">Adobe Photoshop</a></li>
      <li><a href="#">Paint Tool SAI</a></li>
      <li><a href="#">Paint NET.</a></li>
       
    </ul>
   </li>
  </ul> 
 </td>
 <td>
  <ul class="dropv">
   <li><a href="#">Animasi</a> 
    <ul>
     <li><a href="#">Toon Boom Animate Pro</a></li>
     <li><a href="#">blender</a></li>
     <li><a href="#">Macromedia flash</a></li>
     <li><a href="#">Toon Boom Animate Studio</a></li>
     
    </ul>
 </td> 
 </tr>
</table>
</html>

Tugas 2.
Zebra

<html>
<title>Hermawan Saputro</title>
<head>

.anime
 { 
   width:80%;
   margin-top:24px;
   margin-left:130px;
   border:1px solid #000;
   font-family:Centabel Book, Arial, Helvetica, sans-serif;
   text-align:center;
   border-radius:7px;
   
 }
   td{border: 1px solid #0000B7;border-radius:5px;
 }
 
 th
   {
   text-align:center;
   align:center;
   background-color:blue;
   color:white;border-radius:5px;
   }
 .anime1
   {
   text-align:center;
   background-color:blue;
   border-radius:30px;
   }
 
   tr:hover   {color:red;cursor: pointer;}
   transition: all 1s;
   
</style>

</head>
<body>
<body id="body">
</div>

</body>
<table class="anime">
 <tr>
  <th>Nama penyanyi</th>
  <th>Album</th>
  <th>Release (tahun)</th>
  <th>Best Song</th>
  </tr>
    <tr class="anime">
      <td>Afilia Saga</td>
  <td>prismatic infinity carat</td>
  <td>2013</td>
  <td>prismatic infinity carat</td>
 </tr>
    <tr class="anime1">
  <td>Supercell</td>
  <td>ZIGAEXPERIENTIA</td>
  <td>2013</td>
  <td>The Bravery</td>
 </tr>
 <tr class="anime">
         <td>One Ok Rock</td>
  <td>Zankyo Reference</td>
  <td>2011</td>
  <td>Re_make</td>
 </tr>
 <tr class="anime1">
      <td>nano.RIPE</td>
  <td>Plus to Minus no Shikumi</td>
  <td>2012</td>
  <td>Hana no iru</td>
 </tr>
 <tr class="anime">
         <td>miwa</td>
  <td>guitarium</td>
  <td>2011/2012</td>
  <td>FRiDAY-MA-MAGiC</td>
 </tr>
 <tr class="anime1">
      <td>LiSA</td>
  <td>LANDSCPE</td>
  <td>2012/2013</td>
  <td>Traumerei</td>
 </tr>
 <tr class="anime">
         <td>Ikimonogakari</td>
  <td>NEWTRAL</td>
  <td>Unknown</td>
  <td>Aruite Ikou</td>
 </tr>
 <tr class="anime1">
      <td>Haruna Luna</td>
  <td>Oversky</td>
  <td>2011/2012</td>
  <td>Overfly</td>
 
</table>
</html>

Rabu, 20 November 2013

Sejarah Dan Perkembangan CSS

Pengertian dan fungsi CSS

Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang digunakan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat kita gunakan dalam mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Sejarah CSS

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style.

CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.

Beberapa Versi dari 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.

Fitur terbaru CSS 3 :

1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Sifat CSS

Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain.

Contoh:

Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus.

Contoh :

Rabu, 18 September 2013

Sejarah dan perkembangan HTML

Sejarah HTML

HTML(Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat
sebuah halaman web dan menampilkan berbagai informasi dalam sebuah browser internet.HTML dahulunya bernama SGML ( Standard generalized Markup Language ) yang digunakan dalam dunia penerbitan dan percetakanHTML saat ini merupakan standart internet yang didefinisikan dan dikendaikan penggunaanya oleh World Wide Web Consortium (W3C).

HTML berupa kode-kode tag yang menginstrusikan browser untuk menghasilkan tampilan sesuai yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Google Crome atau aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks biasa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu dan sisimpan dengan ekstensi*.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).

ini adalah tampilan sederhana dari sebuah script HTML,cukup sederhana bukan,,,

Perkembangan HTML

HTML +

HTML + merupakan HTML versi pertama yang mempunyai beberapa kemampuan diantaranya :

Heading.
Paragraph.
Hypertext.
List.
Cetak tebal dan miring pada teks.
Peletakan image pada dokumen tanpa teks disekelilingnya (wrapping),

HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif. Dengan menggunakan HTML 2.0, kita dapat membuat lembar halaman ciptaan yang dapat dilihat oleh semua orang.

HTML versi 3.2

HTML 3.2 berisi fitur2 baru seperti font, tabel, applet, superscripts, subscript,dll. Salah satu unsur yang ditambahkan ke standar HTML 3.2, adalah . Tag ini diperkenalkan kompleksitas yang tidak perlu untuk tugas penting dari memisahkan konten HTML (teks) dari presentasi (style).Selain itu pada HTML versi 3.2 ini, kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML tersebut, seperti javascript dan Vbscript.

HTML versi 4.01

HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan. HTML versi 4.01 masih standart resmi sampai sekarang ini untuk memperbaiki kesalahan-kesalahan kecil (minor errors) pada versi sebelumnya. HTML versi ini juga menjadi standardisasi untuk elemen dan atribut dari script XHTML 1.0.

HTML versi 5.0

HTML versi 5.0 ini masih dikerjakan/dikembangkan mulai 4 Maret 2010 kemaren oleh W3C(World Wide Web Consortium),W3C sendiri adalah sebuah Organisasi yang menangani pengembangan web standar. Disini HTML meningkatkan interperiabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana untuk mengani semua elemen HTML,dan bagaimana memulihkan dari kesalahan.Dan HTML 5 mendukung fungsi untuk Audio embedding,video,graphic,sesi penyimpanan data client,dan dokumen interaktif.

Saya akan meng-Share Aplikasi Dreamweamer yaitu merupakan tool pembuat homepage yang menggabungkan antara GUI (Graphical User Interface) dan text based. Dreamweamer (mulai versi 4) boleh dibilang merupakan editor HTML pertama dengan fitur - fitur yang sangat lengkap.
Berikut Link'ya DREAMWEAVER CS6 FULL VERSION