Selasa, 27 Agustus 2013

Tugas pertama Program Web

1. Jelaskan apa Yang dimaksud dengan HTML?

   Jawab : HTML (Hyper text Markup Language) merupakan sebuah bahasa scripting yang dapat menghasilkan halaman Webside sehingga halaman tersebut dapat di akses pada komputer olient. Dapat digunakan Notepad dan Macromedia Drem Weaver. HTML bisa diartikan sebagai suatu file teks sederhana yang mengandung perintah-perintah berupa TAGS sehingga sebuah web browser dapat menampilkan suatu halaman dengan display tertentu. Sebenarnya pada postingan sebelumnya sudah dijelaskan mengenai Tutorial HTML, tetapi pada postingan tersebut lebih menekankan ke tentang cara membuat web sederhana menggunakan HTML. Back to topicLalu, Apa itu TAGS? Tag itu adalah tanda < dan >. Jika diantara tanda tadi diberi HTML yang jadinya seperti ini <HTML>, maka tag tersebut disebut tag html.





Apa itu HTML

Apa itu HTML - HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. HTML dibuat oleh Tim Barners-Lee ketika masih bekerja untuk CERN. HTML dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 90-an, HTML mengalami perkembangan yang sangat pesat. Setiap perkembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik daripada versi sebelumnya. Perkembangan yang pesat tersebut tidak sampai merubah cara kerja HTML.


2. Bagaimana struktur HTML dan contohnya?

Jawab : Struktur HTML

<html>


<head>
<title>
</title>
</head>
<body>


</body>
</html>

Setiap ada tag pembuka maka harus ada tag penutup yang ditandai dengan tanda "/". Contoh :<title></title>, <body> </body>,<html></html>.
Antara tag <title> </title> digunakan untuk menulis judul halaman web yang bersangkutan. Contohnya adalah tulisan "ahmadamirudin.jw.lt" yang ada pada pojok kiri atas halaman ini maka penulisannya menjadi :
<html>
<head>
<title>ahmadamirudin.jw.lt
</title>
</head>
<body>


</body>
</html>

Sedangkan antara tag <body> </body> digunakan untuk mengisi apa yang akan ditampilkan pada halaman anda, bisa berupa tulisan, gambar, link dan sebagainya.
Adapun beberapa tambahan yang dapat ditambahkan pada tag <body> adalah sebagai berikut:
  • Meberikan warna background pada halaman web :
    <body bgcolor="blue">
    Atau dapat juga menggunakan kode warna Hexa (RGB /red-green-blue) yang terdiri dari 6 karakter yang terdiri dari gabungan angka dan huruf, dan penulisannya juga harus diawalai dengan tanda "#"(pagar). 2 karakter pertama mewakili warna merah yang dimulai dari paling rendah 00 sampai paling tinggi ff, atau bisa juga kombinasi huruf dan angka tadi. Begitu juga 2 karakter berikutnya mewakili warna hijau dan 2 karakter berikutnya mewakili warna biru.
    contoh penulisan kode untuk warna hitam #000000, putih #ffffff, merah #ff0000, abu-abu #d3d3d3 dan lain lain sesuai dengan keinginan anda.
  • Memberikan background gambar
    <body background="gambar.jpg">
    Penulisan format gambar juga harus disertakan seperti *.jpg, *.gif, *.bmp dan lain-lain
    Jika ingin menginginkan warrna background transparan maka ditulis dengan <body bgcolor="transparent">
  • Memberikan warna teks
    <body text="#000000">
  • Mengatur margin halaman
    <body leftmargin="20" topmargin="20">
  • mengatur warna link
    <body link="#ff0000"vlink="#00ff00"
    alink="#0000ff">
Dan jika semuanya ditulis bersamaan maka menjadi :
<body bgcolor="blue"text="#000000"
 
leftmargin="20" topmargin="20"
 
link="#ff0000"vlink="#00ff00"alink="#0000ff">

Contoh dari HTML :
<html>
<head>
    <title> atribut dan warna dasar </title>
</head>
<body bgcolor ="#ffffcc"text=#"rrggbb">
   <font color ="#ooooee">
  <h1> bintang kecil </h1> </font>
  <h5> <i> dan nbsp; lagu anak-anak </i> </h5>
  <br> bintang kecil
  <br> di langit yang biru
  <br> amat banyak menghias angkasa
  <br>
  <br> aku ingin terbang dan menari
  <br> jauh tinggi ketempat kau berada
  <br>
  </body>
  </html>

3. TAG-TAG HTML

Jawab : 
               Basic tags    : <idoctupe>, <html>, <body>, <br>, <hr>, <p>,<!-->,<h1> to <h6>
               Char format  : <b>, <strong>, <i>, <big>, <small>, <sup>, <sub>, <em>
               Out put          : <pre>,<code>, <tt>, <kbd>, <yar>, <samp>
               Bloks             : <address>, <blockquote>, <g>, <cite>, <ins>, <del>
               Links             : <a>, <link>
               Frames         : <frame>, <frameset>, <noframeset>
               Input              : <from>, <input>, <taksarea>, <button>, <select>, <optauroup>, <option>, 
                                       <label>, <fieldset>, <legend>
               List                : <ul>, <ol>, <li>, <dl>, <dt>, <dfn>, <dd>
               Images          : <img>, <map>, <area>
               Tables           : <table>, <caption>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>,                                                <colgroup>
               Styles            : <style>, <div>
               Meta info        : <head>, <title>, <meta>
               Programming : <script>, <noscript>, <object>, <param>, <applet>

4. Atribut dari beberapa TAG

Jawab : 
            Tag a adalah salah satu dari beberapa tag html, sedangkan kebanyakan fungsinya ialah untuk membuat link.




apa itu link?, menurut saya link itu adalah sebuah text atau gambar yang apabila di klik akan mengarah ke document lain(lebih lengkap tentang link cari di google), sorry ya disini saya hanya share tentang tag a serta atribut-atributnya :)
Contoh Dan Penulisan Sebuah Link Adalah Seperti Ini
a href="http://www.indaam.com">indam.com</a>
tadinya seperti ini
indaam.com

keterangan;
  • diawali dengan tag a
  • Href adalah salah satu atribut yang di tambahkan kedalam tag a dimana value dari href ini adalah url
  • Anggap saja url itu adalah sebuah alamat web
  • ag a adalah salah satu dari beberapa tag html, sedangkan kebanyakan fungsinya ialah untuk membuat link.
    apa itu link?, menurut saya link itu adalah sebuah text atau gambar yang apabila di klik akan mengarah ke document lain(lebih lengkap tentang link cari di google), sorry ya disini saya hanya share tentang tag a serta atribut-atributnya :)

    Berikut Keterangan Dan Fungsi Masing-Masing Atribut

    Title=”Value”

    contoh
    a href="http://www.indaam.com" title="indam site">indam</a>
    jadinya seperti ini
    indam

    keterangan;
    • fungsi dari atribut title ini adalah untuk memberikan judul pada link yang kita buat tadi
    • value/nilai title ini bisa ditulis apa saja, terserahdan disarankan penulisan valuenya sama dengan isi link tersebut

    Target=”Value”

    contoh
    a href="http://www.indaam.com/about" title="about indam" target="_blank">about</a>
    jadinya seperti ini
    about

    keterangan;
    • biasanya fungsi atribut ini untuk, membuat link, yang apabila di klik akan terbuka di tab baru, namun
    • kita juga bisa menyesuaikan value dari atribut ini, value dari atribut ini antara lain
    • _blank, _self, _top(cari value lainnya di google)

    Rel=”Value”

    contoh
    a href="http://www.indaam.com" title="indam site" rel="follow">indam</a>
    jadinya seperti ini
    indam

    keterangan;
    • fungsi dari atribut rel ini untuk memaberitahu robots search engine tentang keabsahan link yang kita buat tadi
    • value lain dari atribut rel adalah nofollow, bookmark, tag dan follow(yang aku tahu hanya tiga biji :) )

    Style=”Value”

    contoh
    a href="http://www.indaam.com" title="indam site" style="color:red; text-decoration:blink;">indam</a>
    jadinya seperti ini
    indam

    keterangan;
    • fungsi dari atribut ini, untuk memberi style pada link yang kita buat tadi, misalnya menentukan warna link, warna background, decoration text, ukuran font, dsa
    • sayangnya jika anda ingin menambahkan atribut style, sahabat harus paham/bisa css(saya akan bahas kedepannya)

    Id=”Value”

    contoh
    a href="http://www.indaam.com" title="indam site" id="idyangsayabuatsebelumnya">indam</a>
    jadinya seperti ini
    indam

    keterangan;
    • tidak kelihatan kan perubahannya, yups karna saya tidak menambahkan id selectornya
    • jika sahabat ingin menambahkan atribut id, sahabat harus membuat sebuah style terlebih dahulu, contohnya seperti ini
    style type="text/css">
    #idyangsayabuatsebelumnya
    {background-color:lime;
    font:normal bold 200% verdana;
    width:300px;
    }
    </style>
    <a href="http://www.indaam.com" title="indam site" id="idyangsayabuatsebelumnya">indam</a>
    aka jadinya akan seperti ini
    indam
    yah, sahabat harus bisa css(Insha Allah saya akan bahas di artikel berikutnya)

    Class=”Value”

    contoh
    a href="http://www.indaam.com" title="indam site" class="classyangsayabuatsebelumnya">indam</a>
    keterangan;
    • hampir sama seperti atribut id, hanya saja class itu pakai [dot], sedangkan id pakai #{pager}
    • dan perlu dipahami, penggunaan ID hanya boleh sekali, sedankan class ‘bisa berulang’
    mungkin cuma itu untuk sekarang, oia dalam penulisan sebuah link jangan menambahkan atribut yang sama sekaligus, contoh salah
    a href="http://www.indaam.com" title="indam site" title="indam" rel="follow" rel="nofollow">indam</a>
    keterangan;
    • sangat jelas kesalahan diatas, saya membuat dua atribut yang sama title dan rel
    ops lupa, link bergambar
    contoh
    a href="http://www.indaam.com/"><img src="url gambar" alt="keteranngan gambar"/></a>
    tentang link bergambar ini, akan saya bahas di postinngan selanjutnya
    semoga bermanfaat dari href itu tidak mesti url, kita juga bisa memeri nilai mailto:, #idcss
  • indaam.com itu yang akan di tampilkan pada browser
berikut beberapa atribut yang bisa ditambahkan kedalam tag a
  • title
  • rel
  • target
  • style
  • id
  • class

5. Contoh HTML sederhana

Jawab : <html>
              <head>
              <title> Belajar Program Web </title>
              </head>
              <body>
                           Hari ini hari kamis tanggal 29 agustus 2013
              </body>
              </html>

6. Software - Software Animation

Jawab : 
  • Sharp Animator 1.30
  • Sygfig Animator studio 0.63.02
  • ASCLL Animator 1.5
  • Alferd Spritesheets Unpacker 3.0
  • Web Cartoon Maker 1.03
  • Macromedia Flash
  • Anim Pixels
  • Photoshop Cs5
  • SSuite Office-Gif Animator 2.0
  • Animate Gif 1.1
  • Stykz 1.0.2
  • Gifred Motion 1.21
  • Free Morphing 2.1
  • Alternate Pic View EXESlide 1.502
  • F-30 Vo.8.0.1
  • Open Fx 2-0
  • GifSicle 1.58
  • Aleggro Sprite Eitor 0.8.2

7. Software-Software Web Editor

Jawab :
  • Adobe Dreamweaver
  • Coffee Cup Free HTML Editor
  • Komodo edit
  • Aptana studio
  • Net Beans
  • Expresion Web
  • php Designer
  • Best Address HTML Editor
  • CSE HTML Validator
  • Edit plus
  • Top Style
  • Web studio
  • Amaya
  • Seamonkey
  • HTML-kit
  • Alley code

8. Software-Software Web Programing

Jawab :
  • Apple Script
  • CCL (common client interfase)
  • CGI (common gateway interfase)
  • Java
  • Hyper Talk
  • Dylan
  • Glhypic Script
  • GEL (gain extension language)
  • Guile
  • Icon
  • Site Spinner
  • Xara Web Designer