Scribd
Unggah
13 tayangan26 halaman

Pelatihan WEB HTML5 Dam CSS3

Diunggah oleh

hartosahidaullah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
13 tayangan26 halaman

Pelatihan WEB HTML5 Dam CSS3

Diunggah oleh

hartosahidaullah
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 26

PELATIHAN WEB HTML 5 DAN CSS

HTML 5 Programming

2020
FAKULTAS ILMU KOMPUTER
UNIVERSITAS SUBANG
HTML5 FASILKOM|1

Daftar Isi

Daftar Isi ..................................................................................................................................................... 0


Membuat Halaman Depan .......................................................................................................................... 2
Membuat Halaman Single Post ................................................................................................................. 20
Membuat Halaman Galeri Video .............................................................................................................. 22
HTML5 FASILKOM|2

Membuat Halaman Depan


Pada bab ini kita akan langsung mengimplementasikan sintaks-sintaks yang sudah kita bahas sebelumnya
menjadi sebuah web statis yang bisa dikembangkan menjadi web dinamis. Untuk mengimplementasikan
HTML5, pada tutorial ini kita akan memakai Mozilla Firefox 8.0 yang telah support dengan HTML5.

Untuk tampilannya yang akan kita buat adalah seperti gambar berikut:
HTML5 FASILKOM|3

1. Membuat File index.html


Langkah pertama ketiklah awalan untuk penulisan html5 lalu save dengan nama file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman Depan</title>
<link rel="stylesheet" href="style.css"
type="text/css">
</head>
<body>
</body>
</html>

2. Membuat File style.css


Selanjutnya, yang kita lakukan adalah membuat file style.css. File inilah yang menjadi tempat kita
untuk menampung model dan property desain layout yang kita buat di file .html.

3. Menentukan Layout di File index.html


Langkah selanjutnya kita akan
membuat layout pada index.html. HEADER
Langsung melakukan pengkodean
pada index.html. Pertama, kita
MAIN MENU
tentukan dahulu seperti apa layout
yang akan kita buat. Misal kita akan
buat layout seperti contoh berikut:
CONTENT SIDEBAR

FOOTER 1 FOOTER 2 FOOTER 3


HTML5 FASILKOM|4

Sehingga, kita tambahkan sintaks berikut diantara tag <body></body>.


<div id="wrapper">
<div id="container">
<header>HEADER</header>
<nav>MENU</nav>
<div id="content">CONTENT</div>
<div id="sidebar">SIDEBAR</div>
<footer>
<div id="column">KOLOM 1</div>
<div id="column">KOLOM 2</div>
<div id="column">KOLOM 3</div>
</footer>
</div>
</div>
Tag <div id=“wrapper”> kita gunakan untuk membungkus seluruh elemen layout diatas menjadi
satu. <header> adalah pengganti <div id=“header”> pada HTML5. Begitu juga tag <nav> untuk
menggantikan <div id=“menu”>. Sementara untuk content dan sidebar kita masih menggunakan
tag <div>. Tag <footer> pun demikian, dirancang untuk mengganti <div id=“footer”>

4. Memberi Style pada index.html


Setelah layout diatas selesai kita buat, kita tambahkan styling pada layout tersebut. Pindah ke tab
style.css, tambahkan style berikut untuk masing-masing elemen
#wrapper {
width:960px;
margin:auto;
border:#F00 1px solid;
}
HTML5 FASILKOM|5

Buka file index.html melalui browser.

Pada gambar border yang kita beri pada #wrapper sudah terlihat. Ini tandanya file html dan css
keduanya telah tergabung.
Selanjutnya kita tambahkan style untuk elemen-elemen yang lain pada file style.css.
header{
height:120px;
width:960px;
float:left;
background:#CCC;
}
nav{
height:40px;
width:960px;
float:left;
background:#333;
}
#wrapper #content{
width:620px;
float:left;
padding:10px;
}
#wrapper #sidebar{
width:300px;
float:left;
padding:10px;
}
footer{
float:left;
HTML5 FASILKOM|6

background:#CCC;
width:960px;
}
footer #column{
width:300px;
padding:10px;
float:left;
}
Penjelasan dari properti yang digunakan tersebut sebagai berikut :
Width & Height : Menentukan Lebar dan Tinggi dari suatu elemen.
Float : Menempelkan sebuah elemen ke kanan atau ke kiri objek sebelumnya. Apabila
menggunakan float, objek yang kita buat setelah kita memakai elemen ini akan
menempel persis diatas elemen yang di-float. Untuk itu kita gunakan properti
clear:both;
Background : Untuk memberi background pada sebuah elemen, bisa berupa warna atau
gambar.
Padding : Jarak antara tepi elemen dengan konten di dalamnya
HTML5 FASILKOM|7

5. Merubah Desain Basic Layout


a. Memberikan Background Gambar pada Header
Kemudian, kita akan menambahkan sebuah gambar pada header dan menjadikannya sebagai
background pada header. Kita ganti isi dari properti #header{} dan isi dari #wrapper{} menjadi
seperti berikut
#wrapper {
width:960px;
margin:auto;
}
header{
height:120px;
width:960px;
float:left;
background:url(images/header.jpg);
background-size : 960px 120px; /* CSS3 */
}
Hasilnya menjadi seperti berikut :
HTML5 FASILKOM|8

6. Membuat Menu
Selanjutnya yang kita akan membuat menu standar hanya dengan CSS. Kita akan menggunakan
elemen html ul (unordered list) atau ol (ordered list). Keduanya sama saja, karena pada akhirnya
bullet dan nomor yang ada tidak akan kita tampilkan. Ubah isi <nav></nav> menjadi seperti
berikut :
<nav> <!-- HTML 5 -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Artikel</a>
<ul class="submenu">
<li><a href="#">Sains</a></li>
<li><a href="#">Bola</a></li>
</ul>
</li>
<li><a href="video.html">Video</a></li>
<li><a href="kontak.html">Kontak</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</nav>
Kemudian kita ganti dan tambah style nav{} dengan style seperti berikut :
nav{
width:958px;
float:left;
overflow:auto;
background:#DFDFDF;
border:#AAAAAA 1px solid;
}
nav ul{
list-style:none;
float:left;
overflow:auto;
margin:0px;
padding:0px;
}
nav ul li{
display:block;
padding:5px 10px 5px 10px;
float:left;
margin:0px;
border-right:#AAAAAA 1px solid;
}
HTML5 FASILKOM|9

nav ul li .submenu{
display:none;
}
nav ul li:hover .submenu{
display:block;
margin:0px;
width:100px;
position:absolute;
margin-top:5px;
border:#AAAAAA 1px solid;
background:#DFDFDF;
margin-left:-11px;
}
nav ul li:hover .submenu li{
display:block;
width:89px;
padding:5px;
float:left;
border:none;
}
nav ul li:hover{
background:#EDEDED;
}
nav ul li a{
color:#000000;
text-decoration:none;
}
nav ul li a:hover{
text-decoration:underline;
}
Sehingga kita akan menghasilkan halaman seperti berikut.
H T M L 5 F A S I L K O M | 10

7. Menentukan Konten
Selanjutnya kita akan isi konten dengan beberapa artikel. Disini kita akan membuat layout artikel
seperti berikut.

Judul

Feature Images
Potongan Artikel

[Read More]

Sebelumnya, copykan beberapa file gambar yang telah tersedia yang akan digunakan sebagai
Featured Image tersebut. Buat direktori images pada direktori tempat anda membuat file
index.html dan style.css. Buat juga direktori fonts untuk menempatkan webfont yang akan kita
gunakan. Lalu salin gambar dan font ke direktori masing-masing. Pastikan juga anda sudah
menyailn beberapa artikel yang sudah tersedia. Lalu tambahkan kode berikut didalam tag <div
id=“content”></div>.

<div id="single">
<div id="featured-image"
style="background:url(images/1.jpg)">&nbsp;</div>
<h2>Penemuan Telegram Kabarkan Dahsyatnya Letusan
Krakatau</h2>
KOMPAS.com - Dibandingkan letusan Gunung Tambora di Sumbawa
(Nusa Tenggara Timur) pada 1815, letusan Gunung Krakatau masih
kalah besar, baik kekuatan maupun dampaknya. Berbeda dengan
letusan Tambora yang terekam samar dan dampak globalnya baru
dideteksi lebih dari 100 tahun kemudian, letusan Krakatau
diketahui warga dunia dalam bilangan jam [...]
<div id="more"><a href="article-1.html">Baca
Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/2.jpg)">&nbsp;</div>
<h2>Pesawat Tanpa Awak UGM Berdaya Jelajah 200
Kilometer</h2>
JAKARTA, KOMPAS.com - Untuk memantau batas wilayah atau
situasi dan kondisi lokasi bencana alam dengan biaya murah dan
efektif, dibutuhkan teknologi pesawat tanpa awak. Universitas
Gadjah Mada (UGM) turut memamerkan hasil risetnya, berupa
H T M L 5 F A S I L K O M | 11

pesawat udara tanpa awak mini (Mini UAV) pada Forum Riset
Industri Indonesia ke-3 2011, Rabu (30/11/2011) di [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/3.jpg)">&nbsp;</div>
<h2>Prasasti Maya Bukan Petunjuk Kiamat</h2>
KOMPAS.com — Beberapa waktu lalu, National Institute of
Anthropology and History di Meksiko mengumumkan penemuan
Prasasti Comalcalco. Prasasti itu memiliki kalender lingkaran,
kombinasi posisi hari dan bulan yang berulang tiap 52 tahun.
Tanggal yang tertera pada prasasti, diduga 21 Desember 2012,
terkait dengan akhir Baktun (periode tiap 394 tahun) ke-13.
Angka 13 [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/4.jpg)">&nbsp;</div>
<h2>Seperlima Gletser Himalaya Mencair</h2>
KOMPAS.com — Sebanyak seperlima gletser di Himalaya telah
menyusut karena mencair dalam kurun 30 tahun terakhir.
Rinciannya antara lain, 21 persen gletser di Nepal dan 22
persen gletser di Butan mencair. Fakta itu merupakan hasil
penelitian International Center for Integrated Mountain
Development (Icimod), sebuah organisasi yang berbasis di
Kathmandu, Nepal [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
<div id="single">
<div id="featured-image"
style="background:url(images/5.jpg)">&nbsp;</div>
<h2>Asteroid Vesta dalam Video 3D</h2>
PASADENA, KOMPAS.com - Asteroid Vesta adalah salah satu
asteroid terbesar di Tata Surya. Diameter asteroid ini mencapai
530 km. Asteroid ini ditemukan oleh Heinrich Wilhelm Olbers
pada 29 Maret 1807. Penasaran seperti apa rupa asteroid Vesta?
NASA telah memproduksi citra yang menyuguhkan rupa asteroid
Vesta dalam versi 3D. Citra tersebut diambil oleh wahana
antariksa [...]
<div id="more"><a href="#">Baca Selengkapnya</a></div>
</div>
H T M L 5 F A S I L K O M | 12

8. Memberi Style pada Konten


Pada awalnya, font yang kita gunakan adalah font standar apabila kita tidak menggantinya. Maka
kita gunakan CSS3 Webfont. Letakkan tag berikut pada bagian paling atasfile CSS kita.

@font-face{
font-family:"Cuprum";
src:url("fonts/Cuprum.ttf");
font-weight:normal;
}
@font-face{
font-family:"Calibri";
src:url("fonts/calibri.ttf");
font-weight:normal;
body{
font-family:Calibri;
}

Selanjutnya kita tambahkan style pada konten dengan menghapus #content{} dan menggantinya
dengan seluruh tag berikut.

#wrapper #content{
width:620px;
float:left;
padding:10px;
}
#wrapper #content #single{
margin:5px;
border:#DFDFDF 1px solid;
padding:5px;
font-size:13px;
float:left;
overflow:auto;
}
#wrapper #content #single #featured-image{
width:150px;
height:150px;
-moz-background-size:450px 150px; /* CSS3 Mozilla Firefox */
background-size:450px 150px; /* CSS3 Other Browser */
background-position:center;
float:left;
overflow:auto;
margin-right:5px;
}
#wrapper #content #single h2{
margin:0px;
font-family:Cuprum;
font-size:18px;
padding:5px;
border:#DFDFDF 1px solid;
background:#EEEEEE;
H T M L 5 F A S I L K O M | 13

margin-bottom:10px;
}
#wrapper #content #single #more a{
float:right;
overflow:auto;
padding:2px 10px 2px 10px;
background:#CF6;
border:#FF9933 1px solid;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
margin-bottom:10px;
margin-right:10px;
margin-top:10px;
text-align:center;
text-decoration:none
color:#000000;
}
#wrapper #content #single #more a:hover{
background:#BD5;
color:#093;
border:#CC6600 1px solid;
}

Sehingga dari kedua tammbahan CSS diatas, maka akan kita dapatkan hasil sebagai berikut :
H T M L 5 F A S I L K O M | 14

9. Membuat Text Header


Text Header biasanya digunakan untuk menuliskan nama web kita. Pada modul ini, akan kita beri
judul DirectNews.Com. Kita ganti tag isi dari tag header dengan tag berikut :

<header>DirectNews.Com</header>
Kemudian ganti style <header> menjadi seperti berikut :

header{
height:100px;
width:940px;
float:left;
background:url(images/header.jpg);
background-size:960px 120px;
padding:20px 0px 0px 20px;
font-family:Cuprum;
font-style:italic;
font-size:32px;
font-weight:bold;
color:#090
text-shadow:#000 2px 2px 1px;
}

Sehingga akan kita dapatkan hasil sebagai berikut :


H T M L 5 F A S I L K O M | 15

10. Membuat Sidebar


Sidebar biasanya diisi dengan beberapa aksesoris yang menambah fungsionalitas sebuah web.
Tidak jarang juga sidebar menjadi tempat untuk memasang link ke situs-situs yang mendukung
web tersebut. Misal plugin Facebook Like, plugin Tweet, dan sebagainya.
Kali ini yang akan kita tampilkan pada sidebar adalah
a. Popular Post
b. Commented Post
c. Audio Streaming

Pada umumnya setiap elemen pada sidebar kita kenal dengan Widget. Masing-masing widget
diwakili oleh tag <li>. Sehingga perlu kita tuliskan kode berikut diantara <div id=“sidebar”></div>

<li class="widget">
<h2>Popular Post</h2>
<ul>
<li><a href="#">Prasasti Maya Bukan Petunjuk
Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video 3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya
Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Commented Post</h2>
<ul>
<li><a href="#">Prasasti Maya Bukan Petunjuk
Kiamat</a></li>
<li><a href="#">Asteroid Vesta dalam Video 3D</a></li>
<li><a href="#">Seperlima Gletser Himalaya
Mencair</a></li>
</ul>
</li>
<li class="widget">
<h2>Audio Streaming</h2>
<audio id="audio" src="sounds/sound.mp3" controls></audio>
</li>
Selanjutnya, kita tambahkan styling pada file style.css, kita hapus bagian #wrapper #sidebar{} dan
kita ganti dengan kode berikut :

#wrapper #sidebar{
width:300px;
float:left
padding:10px;
}
H T M L 5 F A S I L K O M | 16

#wrapper #sidebar .widget{


list-style:none;
}
#wrapper #sidebar .widget ul{
list-style:none;
margin-left:-40px;
}
#wrapper #sidebar .widget li a{
color:#446500;
text-decoration:none;
}
#wrapper #sidebar .widget li a:hover{
text-decoration:underline;
}

11. Membuat Footer dengan Tiga Kolom


Selanjutnya akan kita berikan beberapa elemen pada footer yaitu Dukungan, Kontak, dan
Hubungan dengan Jejaring Sosial. Kita tambahkan kode berikut diantara <div id=“footer”></div>

<div id="column">
<h2>Dapatkan Bantuan dan Dukungan</h2>
Untuk mendapatkan petunjuk atau dukungan dari kami, kunjungi
situs <a
href="http://support.directnews.com">support.directnews.com</a>
dan submit form anda.
</div>
<div id="column">
<h2>Hubungi Kami</h2>
Jl. RA. Kartini KM. 3<br>
Subang Jawa Barat<br>
(+62260) 12345
</div>
<div id="column">
<h2>Temukan Kami di ...</h2>
<a
href="http://facebook.com/directnewsaccess">Facebook</a><br>
<a href="http://twitter.com/directnewsaccess">Twitter</a>
</div>
Terakhir, kita ganti isi dari #footer dan kita tambahkan kode berikut pada style.css

footer{
float:left;
background:#333333;
width:960px;
color:#BBBBBB;
}
footer #column{
width:300px;
H T M L 5 F A S I L K O M | 17

padding:10px;
float:left;
font-size:14px;
}
footer #column h2{
margin:0px;
margin-bottom:10px;
font-family:Cuprum;
font-size:18px;
color:#FFFFFF;
font-weight:bold;
}
footer #column a{
font-weight:bold;
color:#0099CC;
text-decoration:none;
}
footer #column a:hover{
text-decoration:underline;
}
Sehingga kita dapatkan hasil output seperti berikut

Selanjutnya, kita percantik tampilan web tersebut dengan menambahkan background dan
memberi border pada web utama. Kopikan file background yang telah disediakan ke directori
/images. Kita ganti tag body sampai ke header di style.css dengan kode berikut:

body{
font-family:Calibri;
background:url(images/bg.jpg);
background-attachment:fixed;
background-position:center;
}
#wrapper{
width:980px;
margin:auto;
}
#container{
H T M L 5 F A S I L K O M | 18

padding:10px;
background:#FFFFFF;
float:left;
margin-top:10px;
margin-bottom:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
}
header{
height:100px;
width:938px;
border:#DFDFDF 1px solid;
float:left;
background:url(images/header.jpg);
background-size:960px 120px;
padding:20px 0px 0px 20px;
font-family:Cuprum;
font-style:italic;
font-size:32px;
font-weight:bold;
color:#090;
text-shadow:#000 2px 2px; /* CSS3 */
}
Jangan lupa mengganti judul yang dari awal masih “Halaman Depan”. Misalnya kita ganti judul
menjadi
:: Direct News Access :: Deliver News Fastly ::
Sehingga kita dapatkan hasil sebagai berikut
H T M L 5 F A S I L K O M | 19
H T M L 5 F A S I L K O M | 20

Membuat Halaman Single Post


Membuat halaman single post pada dasarnya tidak terlalu sulit. Kita cukup menyalin dari file index.html,
lalu kita rename menjadi article-1.html. Lalu kita ganti seluruh isi elemen dari <div id=“content”></div>
menjadi seperti berikut:

<div id="single">
<div id="thumbnail-image"
style="background:url(images/1.jpg)">&nbsp;</div>
<h2>Penemuan Telegram Kabarkan Dahsyatnya Letusan Krakatau</h2>
<p>KOMPAS.com - Dibandingkan letusan Gunung Tambora di Sumbawa
(Nusa Tenggara Timur) pada 1815, letusan Gunung Krakatau masih kalah
besar, baik kekuatan maupun dampaknya. Berbeda dengan letusan Tambora
yang terekam samar dan dampak globalnya baru dideteksi lebih dari 100
tahun kemudian, letusan Krakatau diketahui warga dunia dalam bilangan
jam.</p>
<p>Dampak letusan Tambora baru diketahui ketika peneliti di
kantor meteorologi Amerika Serikat, WJ Humphreys, pada tahun 1930-an
menemukan hubungan antara cuaca buruk di dunia Barat pada 1816 dan
letusan Gunung Tambora. Adapun letusan Krakatau telah menjadi berita
utama di koran-koran di Eropa tak lama kemudian.</p>
<p>Tsunami yang menyebar luas ke berbagai penjuru dunia pada 27
Agustus 1883 juga terdeteksi dengan cepat bahwa sumbernya Krakatau.
Sepanjang tanggal 27 Agustus dan sehari setelahnya, telegram dari
Batavia (Jakarta)—160 km dari Krakatau—berkali-kali dikirim ke
Singapura. Dari sana kabar kemudian menyebar jauh hingga Inggris.</p>
<p>Bunyi telegram menyebutkan kepanikan suasana di Jakarta waktu
itu. "Batavia saat ini hampir gelap gulita—lampu gas menyala
sepanjang malam—tak dapat berkomunikasi dengan Anjer (Anyer)—
beberapa jembatan hancur, sungai-sungai meluap karena gelombang laut
yang menuju daratan," demikian isi telegram yang dikirim pada sore
hari, 27 Agustus.</p>
<p>Kemudian, pukul 11.00 pada 28 Agustus, sebuah telegram kembali
diterima di Singapura, "Anjer, Tjeringin, dan Telok Beting hancur
lebur." Setengah jam kemudian kabar buruk kembali dikirim, "Mercusuar
di Selat Sunda menghilang."</p>
<p>Berikutnya, telegram itu mengirim informasi lebih detail
tentang gelombang laut setinggi 40 meter yang menghanyutkan terumbu
karang seberat 600 ton ke daratan Anyer. Disebutkan, sedikitnya
36.417 orang tewas, sebagian besar karena gelombang tsunami, dan 165
desa hancur.</p>
<p>Berita yang cepat menyebar itu tak membuat warga Australia
bagian selatan, Perth, Colombo, dan Rodriguez (sejauh 4.800 km),
harus lama bertanya-tanya tentang suara gelegar letusan yang
terdengar dari rumah mereka pada 27 Agustus. Demikian halnya warga
dunia menjadi cepat tahu bahwa tsunami yang melanda pantai Sri Lanka
dan perubahan tinggi permukaan air laut di Selandia Baru, Alaska dan
Saluran Inggris pada hari itu adalah dampak Krakatau.</p>
<p>Para meteorolog dunia juga dengan cepat menghubungkan bahwa
cuaca dingin yang terjadi sepanjang tahun 1883 hingga paruh pertama
H T M L 5 F A S I L K O M | 21

1884 adalah berkat letusan Krakatau. Awan dari abu vulkanik naik ke
atas mencapai ketinggian 50-80 km dan mengitari bumi dengan kecepatan
jet beberapa kali. Suhu udara menjadi lebih dingin akibat sinar
matahari terhalang abu vulkanik lebih dari satu tahun lamanya di
beberapa wilayah bumi. Volume material yang dikeluarkan diperkirakan
sekitar 18-21 kilometer kubik yang terdiri dari 9-10 kilometer kubik
batu-batu berat.</p>
<p>Letusan Krakatau merupakan bencana besar pertama di dunia yang
terjadi setelah jaringan kabel telegraf menyambung di seluruh dunia.
Dua belas tahun sejak Samuel Morse pada 24 Mei 1844 mengirimkan pesan
pertama dari gedung Mahkamah Agung di Washington kepada koleganya
Alfred Vail, di Baltimore, telegram sudah disambung ke istana besar
di Buitenzorg ke kantor-kantor di Batavia. Jawa kemudian terhubung ke
dunia internasional sejak 1859, melalui Singapura, sehingga berita
letusan Krakatau bisa dengan cepat menyebar luas.(Tim Penulis: Ahmad
Arif, Indira Permanasari, Yulvianus Harjono, C Anto Saptowalyono.
Litbang: Rustiono)</p>
</div>
Lalu kita tambahkan tag berikut pada file style.css

#wrapper #content #single #thumbnail-image{


width:620px;
height:310px;
-moz-background-size:620px 310px; /* CSS3 Mozilla Firefox */
background-size:620px 310px; /* CSS3 Other Browser */
background-position:center;
margin-bottom:10px;
}
H T M L 5 F A S I L K O M | 22

Membuat Halaman Galeri Video


Salah satu fitur baru pada HTML5 adalah embedded video tanpa menggunakan plugin pihak ketiga. Dalam
hal ini adalah Flash Player. Pada bab ini kita akan membuat galeri video dengan memanfaatkan tag
<video> pada HTML5. Berdasarkan penelitian kami beberapa ekstensi video bisa dimainkan di browser
tertentu, beberapa lainnya tidak. Sehingga kami menggunakan tiga tipe video file yaitu MP4, OGG, dan
WebM.

1. Halaman video.html
Halaman ini berisi seperti playlist, yaitu berisi daftar link-link video yang akan dimainkan. Pada
halaman ini kita hanya akan membuat link-link yang menuju ke halaman detail video. Pertama
kita salin halaman index.html, kemudian mengganti namanya menjadi video.html. Kita ganti isi
dari <div id=“content”></div> pada video.html menjadi seperti berikut
<div id="content">
<div id="single" style="width:580px;">
<h2>Galeri Video</h2>
<p>
<h2 class="video-title"><a href="video-1.html">Transformer 3
Official Trailer</a></h2>
Uploaded on June 2011, 2099 views.
</p>
<p>
<h2 class="video-title"><a href="video-2.html">Dapur Umami -
Chicken Wings</a></h2>
Uploaded on September 2011, 39 views.
</p>
<p>
<h2 class="video-title"><a href="video-3.html">Bear in the
River</a></h2>
Uploaded on November 2011, 3 views.
</p>
</div>
</div>
Kemudian tambahkan CSS berikut pada file style.css
#wrapper #content #single h2.video-title{
border:none;
}
#wrapper #content #single h2.video-title a{
color:#5f8f00;
text-decoration:none;
font-size:16px;
font-weight:normal;
}
#wrapper #content #single h2.video-title a:hover{
H T M L 5 F A S I L K O M | 23

text-decoration:underline;
}
Sehingga kita dapatkan hasil sebagai berikut

2. Halaman video-1.html
Selanjutkan kita akan membuat halaman detail video, kita salin juga file index.html menjadi
video-1.html. Kemudian ganti seluruh elemen di dalam <div id=“content”></div> menjadi seperti
berikut
<div id="content">
<div id="single" style="width:580px;">
<h2>Transformer 3 Official Trailer</h2>
<video controls="controls">
<source src="videos/Transformer 3 Official
Trailer.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
H T M L 5 F A S I L K O M | 24

Sehingga kita dapatkan tampilan single video seperti berikut:

3. Halaman video-2.html
Untuk membuat video kedua, kita salin file video-1.html kemudian rubah namanya menjadi video-
2.html. Yang kita ganti cukup source dari video dan judul dari video. Kita ganti dengan tag berikut.
<div id="single" style="width:580px;">
<h2>Dapur Umami - Chicken Wings</h2
<video controls>
<source src="videos/Dapur Umami - Chicken Wings.webm"
type="video/webm" />
Your browser does not support the video tag.
</video>
</div>
H T M L 5 F A S I L K O M | 25

Sehingga kita dapatkan tampilan video kedua sebagai berikut:

4. Halaman video-3.html
Untuk membuat video ketiga, kita salin file video-1.html kemudian rubah namanya menjadi video-
3.html. Kemudian mengganti source video dan judul video seperti berikut:
<div id="single" style="width:580px;">
<h2>Bear in the River</h2
<video controls>
<source src="videos/Bear.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>

Sehingga kita dapatkan tampilan video kedua sebagai berikut:

Anda mungkin juga menyukai