Pertemuan 3 - Perkembangan HTML

Apa Itu HTML ?

-          HTML ( Hypertext Markup Language )

1.    Hypertext   :  Lebih dari sekedar text. Dapat berupa picture, video, audio. (More than just  text)

2.    Markup      :  Didalam sintak diawali dengan tanda ( < ) dan diakhiri dengan ( > )

3.    Language   :  Merupakan bahasa yang standar dari W3C

-            File HTML memiliki ekstension (.htnl atau .htm)

-            Isi dari file HTML dapat dilihat pada web browser, dengan memanggil tempat penyimpanan file beserta nama file html tersebut.

Contoh : D:/project/index.html

Alamat diatas artinya : membuka file html yang berada di drive D, yang terletak pada folder project, dengan nama file : index.html

-            Rekayasa Perangkat Lunak merupakan salah satu perkembangan dari ilmu HTML

Lebih Dekat Dengan HTML

Dari penjelasan-penjelasan diatas, dapat disimpulkan bahwa :

HTML adalah bahasa standar yaitu bahasa markah yang lebih dari sekedar text, digunakan untuk membuat halaman web. Markah tersebut dapat berfungsi untuk menampilkan berbagai informasi berupa text, menampilkan informasi melalui berbagai gambar, menampilkan video maupun audio, yang dapat dijelajahi melalui Internet. HTML ini memiliki ciri khas bahwa setiap ingin memulai penggunaan perintah maka harus diawali dengan markah ( < ) dan diakhiri dengan ( > ), disebut dengan Format ACSII. HTML ini didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C)

        

HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web.

      

HTML bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language). 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).

Mendesain HTML dapat dilakukan dengan dua cara:

1.        Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain.

2.        Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen              HTML

Sejarah Singkat HTML

Pada tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

        

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi di luar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5.

Perkembangan HTML

 Rincian dari Perkembangan HTML :

1.        HTML 1.0 (1989)

Versi ini merupakan versi pertama sejak lahirnya Bahasa HTML yang dikembangkan oleh Berners-Lee. Saat itu HTML Versi 1 ini hanya berisi halaman yang berbentuk statis. memiliki kemampuan untuk heading, paragraph, hypertext, manipulasi text (bold & italic) serta memiliki hubungan terhadap penggunaan sebuah gambar.

       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)

2.        HTML 2.0 (22 September 1995)

Pada tahun 1995, “HTML 2.0″ telah dituliskan, dengan mengambil ide dari naskah HTML yang asli. Sebuah proposal pengganti dinamakan HTML+ juga dituliskan oleh Dave Raggett, dimana digunakan sebagai sebuah dasar untuk elemen-elemen baru yang diimplementasikan pada browser (seperti metode untuk memasukkan gambar ke dalam dokumen dipelopori oleh NCSA Mosaic).

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.

3.        HTML 3.2 (14 Januari 1996)

Merupakan perkembangan dari HTML versi 3.0. keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi popular. Maka dibakukan versi 3.2 untuk mengakomodasi praktek  yang banyak digunakan oleh pengembang browser dan diterima secara umum. Dapat dikatakan versi 3.2 ini merupakan versi 3.2 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft

HTML 3.2 berisi fitur-fitur  baru seperti

-        Font

-        Tabel

-        Applet

-        Superscripts

-        Subscript, dll

Salah satu unsur yang ditambahkan ke standar HTML 3.2, adalah <tag> . 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.

4.        HTML 4.0 (18 Desember 1997)

Pada tahun 1997, W3C publikasikan HTML 4.0 sebagai sebuah rekomendasi yang mengadopsi ekstensi yang lebih berspesifik browser, namun juga telah berusaha dalam melakukan rasionalisasi dan pembersihan pada HTML. Dalam versi ini dilakukan dengan menandakan beberapa elemen sebagai elemen “deprecated”, yang berarti elemen-elemen yang tidak terpakai. Meskipun elemen-elemen deprecated masih tetap berada dalam versi ini, pada versi berikutnya mereka akan dihapus. Versi ini juga merupakan sebuah penganjuran untuk lebih baik dan semantik dalam penggunaan HTML pada dokumen.

5.        HTML 4.1 (24 Desember 1999)

HTML 4.1 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 ini memuat banyak sekali perubahan dan revisi dari versi sebelumnya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti

-       Table

-       Image

-       Link

-       Text

-       Meta

-       Imagemaps

-       Form, dll

Pada perkembangan sekarang mungkin sebagian orang masih merasakan yang namanya HTML 4 adalah kemampuan design web yaitu dengan menggunakan css (Cascading Style Sheets). CSS ini memberikan kemuduhan dalam memberikan tampilan yang terbaik pada browser Anda.

6.        HTML 5 (Januari 2008)

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.

    

Beberapa fitur baru di HTML 5 sebagai 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

HTML 5 menjadi standar baru untuk HTML, XHTML, & DOM HTML. HTML5 ini merupakan proyek kerjasama antara W3C dengan WHATWG (Web Hypertext Application Technology Working Group). HTML5 menambahkan beberapa perintah baru yang membantu para programmer web untuk mendesain website lebih menarik & interaktif

Kelebihan HTML 5 :

1.        Cleaner code

Kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.

2.        Greater consistency

HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik   dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

3.        Improve Semantics

Berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footerdan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”.

4.        Improved Accessibility

Memudahkan struktur pembangunan sebuah web, maka developerdapat membangun pemahaman yang lebih detil mengenai halaman web.

5.        Client-side Database,

HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun  dalam konsep lokal, dalam hal ini di sisi client.

6.        Geolocation

HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

7.        Offline Aplication Cache

Pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.

8.        Smarter Forms

Terdapat semacam reguler expression (regex) yang membuat form mampu mengenali  secara  lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)

9.        Sharper focus on Web Application Requiments

HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end,aplikasi chat, tools drag and 

API (Aplication Programming Interface) merupakan teknologi yang akan di usung oleh HTML5, berikut ini adalah batasan-batasannya :

-          Offline Data Storage

Memungkinkan kita bisa mengakses data lama di broser dalam keadaan offline. Contoh offline data seperti kita membaca arsip e-mail pada program Outlook atau Thunderbird.

-          Drag and Drop

Drag and Drop ini kita dapat dengan memudahkan mendrag atau mendrop misalnya text, hyperlink,bahkan file di aplikasi dekstop sekalipun.

-          Geolocation

Aplikasi ini memungkinkan kita untuk untuk mengetahui lokasi geografis, sumber informasi di ambil dari GPS (Global Position System). Masih terdapat banyak API lainya dan terus di kembangkan. Dalam implementasinya, Anda akan memerlukan pemrogramanan Java Script untuk menjembatani penggunaan API ini.

Elemen Baru di HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya :

-          Section serupa seperti h1-h6,

-          Article bisa berupa entri blog atau tulisan konten,

-          Aside menyajikan konten pelengkap

-          Header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi,

-          Footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya,

-          Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman faq) dapat digunakan      
            untuk menyajikan percakapan,

-          Penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait 
            berkas multimedia lainnya.

Fitur Fitur pada HTML5

-         elemen canvas untuk menggambar 2D

-         elemen audio dan video untuk Media Playback

-         media penyimpanan luring(Web Storage)

-         beberapa elemen konten spesifik baru, seperti article, header, footer, nav, dan section

           bentuk kontrol yang baru, seperti kalender, tanggal, jam, email, link url, dan search

Perbedan HTML 5 dengan HTML 4 :

-    Pada HTML 4 semua elemen selalu menggunakan definisi ID, contoh :

-   Sedangkan pada HTML 5, tidak perlu menambahkan "div id", "/div",  langsung mengetik 
     jenis  elemennya saja. Contoh : 

                                                                                                                              

Struktur dokumen HTML adalah sebagai berikut :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  <html>

    <head>

            <title>Example page</title>

     </head>

     <body>

            <h1>Hello World</h1>

     </body>

 </html>

Kelebihan HTML :

-   Bukan merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara menjalanakannya
    cukup dengan menggunakan browser

-  Merupakan bahasa peng-kodean lintas platform (cross platform), maksudnya HTML dapat 
    digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi 
    yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.

-   Dapat disisipkan/ditambahkan animasi berupa Java Applet atau file-file animasi dari Macromedia 
    Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus 
    untuk menjalankan file-file animasi tersebut).

-   Dapat disisipkan/ditambahkan bahasa pemrograman untuk mempercantik halaman web seperti 
     Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya.

-  Dapat disisipkan/ditambahkan gambar baik gambar statis atau dinamis (animasi) termasuk 
     menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada
     suatu halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa rectangular (kotak), 
     poligon (kurva tak beraturan) atau lingkaran digunakan untuk 'jump' ke halaman lain, atau link 
     ke halaman di luar web yang bersangkutan.

Kekurangan HTML :

-   Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.

-   Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini maksudnya client dapat 
    berinteraksi  dengan server. Untuk keperluan itu, HTML harus disisipi bahasa pemrograman yang 
    dapat menangani hal tersebut, contohnya Perl atau Tcl.

-   Menghasilkan halaman yang statis. Untuk memperoleh halaman yang dinamis harus menggunakan 
     bahasa pemrograman tertentu seperti Javascript atau VBScript dan animasi seperti Flash 
     atau Shockwave.

Kumpulan Tag HTML

<!--    -->	Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
<a href>	Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name>	Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet>	Sebagai awal dari Java applets
<area>	Mendefinisikan daerah yang dapat diklik (link) pada image map
<b>	Membuat teks tebal (Bold)
<basefont>	Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound>	Memberi (suara latar) background sound pada halaman web
<big>	Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink>	Membuat teks berkedip
<body>	Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br>	Pindah baris/baris baru
<caption>	Membuat caption pada tabel
<center>	Untuk perataan tengah terhadap teks atau gambar
<comment>	Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd>	Indents teks
<div>	Represents different sections of text.
<embed>	Menambahkan sound or file avi ke halaman web
<fn>	Seperti tag <a name>
<font>	Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form>	Mendefinisikan input form
<frame>	Mendefinisikan frame
<frameset>	Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> ... <h6>	Ukuran font dari heading1 sampai dengan heading6
<head>	Mendefinisikan head (kepala) document
<hr>	Membuat garis horizontal
<html>	Dokumen html, biasanya berada paling atas pada halaman html
<i>	Membuat teks miring (Italic)
<img>	Mengambil Image, imagemap atau an animation
<input>	Mendefinisikan input field pada form
< justify >	Membuat teks rata kanan-kiri.
<li>	Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<left>	Membuat teks rata kiri.
<map>	Mendefinisikan client-side map
<marquee>	Membuat scrolling teks (teks berjalan) - hanya pada MS Internet Explorer
<nobr>	Mencegah ganti baris pada teks atau images
<noframes>	Jika browser user tidak mendukung frame
<ol>	Mendefinisikan penomoran
<p>	Ganti paragraph/paragraph baru
<pre>	Membuat teks dengan ukuran huruf yg sama
<right>	Membuat teks rata kanan.
<script>	Mendefinisikan awal script
<strike>	Membuat teks bergaris ditengahnya
<table>	Membuat tabel
<td>	Kolom pada tabel
<title>	Mendefinisikan title (judul)
<tr>	Baris pada tabel
<u>	Membuat teks bergaris bawah (underline)
<ul>	Membuat bullet

MEMBUAT PROJECT MENGGUNAKAN HTML

Pada pertemuan 3 ini, kami diberi tugas untuk membuat sebuah project sederhana menggunakan bahasa HTML.  “The Power Of Music”, ya itulah judul project yang kami buat. Project ini terdiri dari 5 page html. Pada kesempatan ini saya akan memperlihatkan hasil project kami dan menjelaskan fitur-fitur yang terdapat didalamnya.

1.        Halaman Index

Merupakan halaman utama, yang berisi menu, diantara :

-            Jenis Musik

-            Tokoh Musik

-            Alat Musik

-            MP3

Pada halaman index, menggunakan beberapa tag HTML, diantaranya :

-            <body bgcolor="lightpink">

       body bgcolor        : Berfungsi request warna background

       lightpink               : Warna yang dipilih untuk background yaitu pink cerah

       Warna background ini digunakan untuk semua halaman html project ini. Jadi setiap halaman memiliki warna yang sama.

<center>

<h1>The Power Of Music</h1>

       Center                  : Rata tengah pada tulisan

       h1                         : Jenis tulisan yaitu Heading 1

-            <table border=5>

       table border          : Pembuatan border pada tabel

       5                           : Ketebalan border tabel

<h2>

<tr><td><a href = "jenis.html">Jenis Musik</a></td>

<td><a href = "tokoh.html">Tokoh Musik</a></td>

<td><a href = "alat.html">Alat Musik</a></td>

<td><a href = "mp3.html">MP3</a></td>

</tr></h2></table>

       h2                         : Jenis tulisan yaitu Heading 2

       tr                           : Pembuatan baris baru

       td                          : Pengisian baris secara horizontal

       a href                    : Pengambilan alamat html atau link alamat

<object data="Foster The People - _Pumped Up Kicks_ Cover by Tanner Patrick - with lyrics.mp3" height="0" width="0">

       object data           : Mengambil alamat objek. Objek yang saya ambil adalah musik. Karena                                 bertipe music, maka ekstensionnya harus diikutsertakan. Musik tersebut                                                akan secara otomatis play ketika halaman index dibuka pada browser.

          Height                         : Untuk mendefinisikan panjang

          Width                          : Untuk mendefinisikan lebar

Tampilan halaman index.html

Menu-menu yang ada pada tabel, apabila diklik maka akan terhubung ke halaman html yang bersangkutan sesuai dengan menu yang dipilih

2.        Halaman Jenis Musik

       Apabila menu Jenis Musik dipilih, maka akan menampilkan halaman seperti dibawah ini. Inilah fungsinya tag <a href> tadi.  Halaman Jenis Musik ini berisi sebagian kecil dari jenis music yang ada dalam kehidupan sehari-hari.

Pada halaman Jenis Musik, menggunakan beberapa tag HTML, diantaranya :

<center>

<h1>Jenis Musik </h1>

Center                  : Rata tengah tulisan

       h1                         : Jenis tulisan yaitu Heading 1

-          <hr><h2><u>Klasik</u></h2></hr>

       hr                          : Membuat garis panjang

       h2                         : Jenis tulisan yaitu Heading 2

       u                           : Memberi garis bawah pada tulisan (underline)

-          <h3>Musik klasik biasanya…..</h3>

       h3                         : Jenis tulisan yaitu Heading 3

Tampilan halaman jenis.html

Menu-menu yang ada pada footer page, apabila diklik maka akan terhubung ke halaman html yang bersangkutan sesuai dengan menu yang dipilih

3.        Halaman Tokoh Musik

       Apabila menu Tokoh Musik dipilih, maka akan menampilkan halaman seperti dibawah ini. Inilah fungsinya tag <a href> tadi.  Halaman Tokoh Musik ini berisi sebagian kecil data-data dari para musisi music maupun penyanyi yang terkenal.

Pada halaman Tokoh Musik, menggunakan beberapa tag HTML, diantaranya :

<center>

<h1>Tokoh Musik </h1>

Center                  : Rata tengah tulisan

       h1                         : Jenis tulisan yaitu Heading 1

-          <hr><h2><u>Klasik</u></h2></hr>

       hr                          : Membuat garis panjang

       h2                         : Jenis tulisan yaitu Heading 2

       u                           : Memberi garis bawah pada tulisan (underline)

-          <h3>Musik klasik biasanya…..</h3>

       h3                         : Jenis tulisan yaitu Heading 3

Tampilan halaman tokoh.html

  Menu-menu yang ada pada footer page, apabila diklik maka akan terhubung ke halaman html yang bersangkutan sesuai dengan menu yang dipilih

4.      Halaman Alat Musik

Apabila menu Alat Musik dipilih, maka akan menampilkan halaman seperti dibawah ini. Inilah fungsinya tag <a href>.  Halaman Alat Musik ini berisi beberapa gambar alat music yang terkenal.

Pada halaman Alat Musik,  menggunakan beberapa tag HTML, diantaranya :

<center>

<h1>Alat Musik </h1><hr></hr>

Center                  : Rata tengah tulisan

       h1                         : Jenis tulisan yaitu Heading 1

       hr                          : Memberi garis panjang

      

       <h2>Piano</h2>

H2                        : Jenis tulisan yaitu Heading 2

<img src="piano.png">

Img src         : Memasukkan gambar kedalam halaman HTML, dengan mengikut sertakan                                   nama gambar tersebut. Dan harus disertai dengan ekstension gambar

Tampilan halaman alat.html

Menu-menu yang ada pada footer page, apabila diklik maka akan terhubung ke halaman html yang bersangkutan sesuai dengan menu yang dipilih

5.      Halaman MP3

Apabila menu MP3 dipilih, maka akan menampilkan halaman seperti dibawah ini. Inilah fungsinya tag <a href>.  Halaman MP3 berisi list(daftar) mp3 yang dapat didengar oleh pengunjung page tersebut. 

Pada halaman mp3, menggunakan beberapa tag HTML, diantaranya :

<center>

<h1>MP3</h1><hr></hr>

Center                  : Rata tengah tulisan

       h1                         : Jenis tulisan yaitu Heading 1

hr                          : Memberi garis panjang

<h2>A-Pink - My My</h2>

<audio src="A Pink - My My.mp3" controls>

<embed src="A Pink - My My.mp3" width="300" height="90" loop="false"autostart="false"/>

</audio>

h2                         :  Jenis tulisan yaitu Heading 2

audio src               : Memasukkan/memanggil objek berupa audio atau suara yang

                               biasa disebut dengan mp3. Dan disertakan dengan ekstensionnya.

Controls               :  Sebagai pengontrol audio. Audio akan berjalan/play ketika tombol 

                               power diklik, jadi audio tidak bekerja secara otomatis,  

                               tetapi di control.Menghidupkan  dan mematikan audio dapat dilakukan 

                               sesuai  keinginan  pemakai. Itulah gunanya control

embed src            :   Apabila browser tidak mendukung fungsi EMBED maka suara akan  

                               ditampilkan  sebagai background saja.

Width                   :  Lebar tampilan untuk mp3

Height                  :  Tinggi tampilan untuk mp3

Loop=”false”       :  control untuk perulangan pemutaran music dinonaktifkan. 

                              Jadi apabila ingin  mendengarkan ulang music(mp3) harus ditekan kembali

                               tombol powernya

autostart=”false”  : fungsi untuk memutar secara otomatis music ketika halaman html dibuka/aktif                      dinonaktifkan. Jadi apabila ingin mendengarkan music(mp3) harus menekan                                        tombol power terlebih dahulu

Tampilan halaman mp3.html 

Tampilan halaman mp3.html ketika salah satu mp3 aktif

       Setiap halaman html memiliki footer, jadi pengguna tidak perlu kembali ke halaman index untuk membuka kembali menu yang tersedia. Cukup dengan meng-klik salah satu menu pada footer, maka page html akan berpindah menuju page pada menu yang dipilih, karena setiap menu telah dihubungkan sesuai dengan nama menunya.

Tampilan menu pada setiap footer page html

Sekian Project yang kami buat, semoga bermanfaat bagi para pembaca. Terimakasih :) :)

Read More