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)
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.
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.
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.
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.
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,
untuk menyajikan percakapan,
- Penggunaan
elemen figure, video, audio, source, embed, canvas, dan elemen terkait
berkas multimedia lainnya.
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 :
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
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.
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).
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.
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.
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.
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.
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
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 :) :)