Pelatihan HTML5 CSS3

1 Day Introduction and Basic Understanding

Himpunan Teknik Informatika PENS-ITS 10 & 11 Desember 2011

1|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 1 :Sejarah HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung

Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat
HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak]] pembuat web.

ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan

Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004
ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.

Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application

baru mencuat pada April 2010 setelah CEOApple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video

Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5

atau menyaksikan konten apapun di web ."

2|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 2 :Whats NEW ?

Fitur baru di HTML5
Pada bagian ini, Anda akan menemukan beberapa fitur baru yang besar yang HTML5 tawarkan. Pertama anda akan belajar tentang elemen semantik baru yang bertujuan untuk memberi maknake berbagai bagian dari suatu halaman Web modern: headers, footers, navigation bars, sidebars, dan sebagainya.

Unsur-unsur semantik baru yang disediakan HTML5 adalah:

<article> Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar. <section> Elemen ini merupakan bagian dari sebuah dokumen atau aplikasi, seperti bab atau bagian dari sebuah artikel atau tutorial. Misalnya, bagian Anda baca sekarang bisa dikelilingi oleh elemen <section> di HTML5. <nav> Ini adalah wadah untuk link navigasi utama pada halaman Web <aside> Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan <hgroup> Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana Anda memiliki judul dan subjudul. <canvas> Unsur ini adalah salah satu aspek yang paling penting dariHTML5 karena memfasilitasi produksi grafik, permainan interaktif,aplikasi paint, dan grafis lain dengan cepat tanpa memerlukan plug-in eksternal sepertiAdobe Flash. <audio> dan <video> Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.

3|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Form web tambahan

Jika Anda telah membuat aplikasi Web sebelumnya, Anda lebih dari mungkin akrab dengan HTML controls form, beberapa yang diimplementasikan menggunakan <input> yang menggunakan elemen. Dalam HTML 4, jenis input berikut didukung: button checkbox file hidden image Macam - macam jenis input form baru di HTML 5: color month date number datetime range datetime-local search email tel password reset radio submit text

time url wee

Fitur baru di CSS3

Bagian ini memperkenalkan Anda dengan fitur baru yang dapat ditemukan di CSS tingkat 3. Sepertitermasuk efek bayangan pada teks dan kotak, sudut dibulatkan pada border, danpenggunaan opacity untuk membuat penampilan transparan.

Selector baru di CSS3

Sebuah pemilih CSS mengacu pada cara di mana elemen-elemen HTML yang stylish menggunakanstylesheet. Misalnya, untuk menempatkan border di sekitar semua elemen <div> Anda menggunakan divselector: div {border: 1px # 000 yang solid;} Untuk menerapkan warna background untuk semua elemen dengan higlight class Anda menggunakan .highlight: .highlight { background-color: yellow; } Untuk mengubah lebar dari suatu elemen dengan nilai atribut ID dari myDiv, Anda menggunakan:

4|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

#myDiv {width: 250px;}.

Tentu saja, ini penyeleksi dapat dikombinasikan, sehingga untuk memilih semua elemen <div> dengan class highlight, Anda menggunakan div.highlight, atau untuk memilih elemen <div> dengan myDiv ID Anda menggunakan div # myDiv.

New Effect:
background background-clip background-origin background-size border-radius border-image border-color box-shadow box-sizing opacity outline-offset resize text-overflow text-shadow word-wrap

5|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Layout multicolumn
Dengan layout multicolumn memungkinkan untuk teks yang akan tersebar di sejumlah kolom, seperti yang terdapat pada Majalah atau koran. Hal ini dapat dilakukan dengan dua cara, baik menggunakancolumn-width, di mana Anda menentukan seberapa lebar setiap kolomnya (yang mana jumlah kolom ditentukan oleh ruang yang tersedia untuk wadah), atau menggunakan column-count, di mana Anda menentukan jumlah kolom yangdigunakan.

Web font
Font web sebenarnya diusulkan untuk CSS2 dan telah tersedia dalam Microsoft Internet Explorer sejak versi 5.Sekarang anda dapat menggunakan aturan @ font-face untuk menggunakan ttf berlisensi. (TrueType) atau OTF (OpenType). font pada halaman Web Anda. Sebuah contoh dari aturan @ font-face adalah sebagai berikut: @ font-face {font-family: Alexa; src: url ('Alexa.otf');}. Anda sekarang dapat menggunakan font ini dalam aturan sendiri CSS anda, seperti: article p { font-family: Alexa, Arial, Helvetica, sans-serif;}.

New Color
Ada juga fitur baru CSS3, termasuk dukungan untuk warna baru, terutama HSL (Hue, Saturation, Lightness) dan nilai-nilai dua warna dengan alpha propertis-RGBA (Merah, Hijau, Biru, Alpha) dan HSLA (Hue, Saturation, Lightness, Alpha).

Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML. Adanya Canvas pada HTML5. Pada versi sebelumnya, untuk bisa memberikan interaksi menggambar di halaman web kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan: canvas. Seperti namanya, canvas adalah media yang bisa dicorat-coret langsung. Tidak lagi perlu memuat plugin khusus Embed Audio Video Secara Langsung Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya. Integrasi (inline) MathML dan SVG dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien. Dapat dimengerti oleh browser lawas (backwards compatible). Seh ingga istilah deprecated tidak akan diperlukan lagi.

6|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 3 : Differences
Perbedaan HTML 5 dengan HTML 4
Keunggulan terbaru dari HTML5

Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML. Tersedianya canvas pada HTML 5 Embed Audio Video Secara Langsung Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya. Integrasi (inline) MathML dan SVG dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien. Dapat dimengerti oleh browser lawas (backwards compatible). Seh ingga istilah deprecated tidak akan diperlukan lagi.

7|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Spesifikasi HTML 5
Spesifikasi HTML 5 menjabarkan vokabular yang dapat ditulis dalam dua sintak yaitu html dan XML yang disesuaikan dengan kebutuhan pemrogram,pasar atau aplikasi.Vokabular HTML dari jaman sebalumnya (HTML+,HTML 2.0, HTML 3.2) umumnya ditulis menggunakan aturan sintak SGML. Pada HTML 4 telah diterapkan dua sintak yaitu: SGML (disebut sebagaiHTML 4.01) dan XML (disebut XHTML 1.0).Sementara itu, HTML 5 menenerapan dua sintak yaitu: html dan XML.Karena SGML nyaris tidak pernah didukung baik oleh browsers maupunkebanyakan tools untuk html authoring yang ada, maka HTML 5 mendefinisikan serialisasi baru (lihat diagram) dan disebut sebagai html, yang sepintas mirip dengan SGML seperti dikenal sebelumnya.

Perbedaan Sintak HTML 4 dan HTML 5

HTML 4 <html><head> <title>Hobo Web LTD Scotland</title> </head> <body> <div id="page"> <div id="header"> <h1><a href="/blog/">Hobo Web</a></h1> </div> <div id="container"> <div id="center" class="column"> <div class="post" id="post-102"> <h2><a href="/test-page/"> Test Page 1</a></h2><div class="entry"> <p>Article Text here</p> </div> </div> <div class="post" id="post-101"> <h2><a href="/test2/"> Test 2</a></h2>

HTML 5
<html><head> <title>Hobo Web LTD Scotland</title> </head> <body> <header> <h1><a href="http://blog/">Hobo Web</a></h1> </header> <section> <article> <h2><a href="/test-page/"> Test Page 1</a></h2><p>Article Text here</p> </article> <article> <h2><a href="/test2/"> Test 2</a></h2> <p>Article Text 2 here</p> </article> <nav> <a href="/blog/page/2/"> Previous Entries</a> </nav> </section> <nav> <ul> <li><h2>Hobo Stuff</h2>

8|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

<div class="entry"> <p>Article 2 Text here</p> </div> </div> </div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/"> Previous Entries</a> </div> <div class="alignright"></div> </div> </div> <div id="right" class="column"> <ul id="sidebar"> <li><h2>Hobo Stuff</h2> <ul> <li><a href="/blog/commentpolicy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li> <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul> </div> <div id="footer"><p>Copyright 2008 Hobo Web LTD</p> </div> </div> </body> </html>

<ul> <li><a href="/blog/commentpolicy/">Comment Policy</a></li> <li><a href="/blog/todo-list/">Todo List</a></li> </ul></li> <li><h2>Archives</h2> <ul> <li><a href='/blog/2008/04/'>April 2008</a></li> <li><a href='/blog/2008/03/'>March 2008</a></li> <li><a href='/blog/2008/02/'>February 2008</a></li> <li><a href='/blog/2008/01/'>January 2008</a></li> </ul> </li> </ul> </nav> <footer> <p>Copyright 2008 Hobo Web LTD</p> </footer> </body> </html>

9|P age

Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Pengenalan CSS
Sebelum Anda dapat menguasai CSS, tentunya Anda harus memahami terlebih dahulu pengertian dari CSS itu sendiri. Anda akan mengetahui sejarah singkat lahirnya CSS, kegunaannya, dan cara penggunaannya. A. Sejarah Singkat CSS Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan web.

CSS level 1 mendukung pengaturan tampilan dalam hal:

1. Font (jenis, ketebalan), 2. Warna teks, latar belakang, dan elemen lainnya, 3. Text attributes, misalnya spasi antar baris, kata, dan huruf, 4. Posisi text, gambar, tabel, dan elemen lainnya, 5. Marjin, border, dan padding. Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2 (CSS level 2) yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capability khususnya media-specific CSS. Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3 dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS 3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul. B. Pengertian & Manfaat CSS Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:

bahasa pemrograman untuk mengatur tampilan suatu website atau blog

Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic

10 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri. Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan scriptyang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepaduntuk menciptakan script CSS sendiri.

Manfaat dari CSS:

1. 2. 3. 4. Kode HTML menjadi lebih sederhana dan lebih mudah diatur, Ukuran file menjadi lebih kecil, sehingga load file lebih cepat, Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja, Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML, 5. Digunakan dalam hampir semua web browser. C. Sintaks & Penempatan Kode CSS Sintaks CSS terdiri dari tiga bagian: selector property value

Selectoradalah elemen atau tag HTML yang akan di-definisi-kan. Propertyadalah atribut yang akan diganti dengan nilai tertentu. Properti dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({). Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan: selector { property: value} contoh 1: p { color:black }

Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (). Untuk memberikan lebih dari satu _property bagi suatu _property, pisahkan setiapkombinasi property:value dengan tanda titik koma (;). Untuk membuat definisi gayalebih mudah dibaca, definisi tiap property dapat dilakukan per baris. Sehinggasintaksnya menjadi:

11 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

selector { property1: value; property2: value_value; } contoh 2: p { text-align:center; font-family:sans serif } Aturan-aturan yang berlaku dalam sintaks CSS: 1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2), 2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil, 3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2), 4. Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,). contoh: h1,h2,h3 {color:green}

Class selector
Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Class dibuat dengan tanda titik kemudian diikuti dengan namakelasnya .namakelas{ }

contoh 3: Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka: p.right {text-align: right} dan p.left {text-align: left}

Aturan Class selector: 1. Jangan memberi nama class dengan angka, 2. Jika memberikan namaclass lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik ().

12 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

ID Selector
Aturan penamaan ID: 1. 2. 3. 4. 5. Dapat mengandung huruf, angka, atau karakter garis bawah, Karakter pertama harus berupa huruf atau karakter garis bawah, Diawali dengan tanda #, Jangan memberi nama id sama dengan value, Jangan memberi nama id dengan tag html kemudian diikuti tanda #.

contoh 4:
<html> <head> <style type = "text/css"> <!-#tebal { font-weight : bold; color : blue; } #miring { font-style : italic; color: pink; } --> </style> </head> <body> <h1>Contoh</h1> <h2 id = "miring"> Selamat Belajar CSS </h2> <h3 id = "tebal"> Saya baru pertama kali belajar CSS </h3> </body> </html>

Penempatan kode CSS dalam HTML

Ada tiga cara penempatan kode CSS dalam HTML: 1. Internal CSS Metode penulisan kode CSS langsung dalam file HTML. contoh: <html>

13 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

<head> <style type=text/css> p {color: white; } body {background-color: black; } </style> </head> <body> <p>Menguak Rahasia CSS</p> </body> </html> 2. Eksternal CSS Memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css. contoh:
<html> <head> <link rel=stylesheet type=text/csshref=test.css/> </head> <body> <h3>Menguak Rahasia CSS</h3> </body> </html>

3. Inline CSS Penulisan kode CSS dalam tag HTML. contoh: nama File : inline.html
<html> <head> </head> <p style=background: red; color: black;>Menguak Rahasia CSS</p> </body> </html>

14 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Contextual Selectors
Contextual Selectors digunakan jika style akan digunakan dalam situasi tertentu, misalnya saja jika elemen HTML yang digunakan merupakan sebuah kombinasi. Misalnya saja jika kita akan membuat semua table data mempunyai align center , font arial, dan huruf berwarna orange.
<table> <tr> <td></td> <td></td> </tr> </table>

Maka digunakan contextual selectors

Table tr td{ color: orange; font-family: arial; Text-align:center;}

Contoh:
<html> <head> <style type="text/css"> table tr td{color:orange; fontfamily:arial;text-align:center;} </style> </head> <body> <table border="1"> <tr> <td>Cinta</td> <td>Bahagia</td> </tr> <tr> <td colspan=2 align=center>Sedih</td> </tr> </table> </body> </html>

15 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 4 : Pengenalan Dreamweaver

Sebagai salah satu compiler kode-kode HTML
1. Pedahuluan Merancang sebuah website tidak terlepas dari pembuatan desain tampilan web tersebut, karena desain web merupakan langkah awal dari pembuatan website. Dasar pembuatan website menggunakan bahasa HTML (HyperText Markup Language) yaitu bahasa pemrograman dalam pembuatan web.Penggunaan HTML dalam pembuatan web tidak semua orang dapat menggunakannya untuk mempermudah dalam pembuatan web ini kita dapat menggunakan aplikasi editor web yang bersifat visual. Salah satu aplikasi untuk melakukan perancangan desain web secara visual adalah Adobe Dreamweaver.Aplikasi ini secara umum sudah sangat poluler digunakan untuk merancang desain website.Aplikasi Adobe Dreamweaver menyediakan banyak fasilitas yang dapat memudahkan user dalam menghasilkan sebuah website yang interaktif dan menarik. 2. Menggunakan Adobe Dreamweaver Untuk menjalankan program Adobe dreamweaver dapat kita buka dari menu start|Program|Adobe Dreamweaver CS5, akan muncul tampilan Starter Page berikut: Jendela Awal Dreamweaver cs5

1 3

Gambar halaman awal Dreamweaver CS5 16 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Gambar di atas merupakan tampilan awal ketika kita membuka program Dreamweaver CS5. Adapun fungsi dari masing masing bagian di atas adalah sbb : 1. Open recent project Fungsi : membuka project terakhir yang dibuat dalam Macromedia Dreamweaver ini. Atau kita bisa membuka project lain dengan klik open. 2. New Project Fungsi : Membuat project baru. Project baru dapat dipilih apakah akan menggunakan bahasa HTML, PHP, Javascript, CSS dsb. Untuk lebih lengkapnya dapat klik more yang tersedia dalam bagian New project 3. Top Features (Videos) Fungsi : Membuka project yang tersedia dalam dreamweaver 4. File explorer Fungsi : Tempat menu menu dalam dreamweaver CS5 (dijelaskan lebih rinci pada halaman selanjutnya). 5. Properties panel Fungsi : Menu yang menyediakan fasilitas yang dapat digunakan user dreamweaver SC5 (dijelaskan lebih rinci pada halaman selanjutnya). 6. Group Panel Fungsi : Group panel merupakan panel berfungsi untuk koneksi project ke luar, baik itu CSS, database, file file, dsb.

17 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Halaman Kerja Dreamweaver cs5 Pada Starter Page di atas pada CreateNew pilihlah HTML, maka tampilan dari Adobe Dreamweaver adalah sebagai berikut:

Menu Bar

Document Toolbar

Document Window

Workspace Switcher

Property Inspector

Panel Groups

1.2.1

Menu Bar

Menu bar pada Adobe Dreamweaver yaitu File, Edit, View, Insert, Modify, Format, Commands, Site, Window, dan Help.Setiap menu mempunyai beberapa submenu sesuai dengan kategorinya, selain itu juga mempunyai fungsi yang berbeda-beda.

18 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

1.2.2

Document Window

Document windows menampilkan dokument dari halaman web yang aktif, atau dokumen yang sedang diedit. Pada Document Window terdapat Title Bar yang menampilkan judul halaman, fasilitas Zoom, Document Toolbar, dan Tag Selector.

1.2.3

Document Toolbar

Dokumen Toolbar berisi tombol-tombol yang digunakan untuk mengatur layar kerja dokumen pada dengan cepat, diantaranya show Code view, Show Code and Design views, dan Show Design view.

Show Code View Mode pada layar Code hanya akan menampilkan kode-kode script dari halaman web. Di sebelah kiri layar kerja terdapat Coding tool yang digunakan untuk mengatur kode atau script tersebut. Untuk mengaktifkan tampilan layar Code, Kita dapat menggunakan salah satu cara berikut: Pada Menu Bar klik View >Code Pada Document Toolbar klik ikon Code

Tampilan layar Code terlihat seperti gambar berikut:

19 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Show Code and Design view Mode tampilan layar ini dikenal dengan mode Split, yaitu menampilkan atau menggabungkan secara bersamaan tampilan layar code dan tampilan layar design. Untuk menampilkan dokumen halaman web dalam mode Split, dapat menggunakan salah satu cara berikut: Pada Menu Bar klik View > Design Pada Document Toolbar klik ikon Design

Tampilan layar Code and Design terlihat seperti gambar berikut:

1.2.4

Tag Selector Tag selector berfungsi untuk menampilkan tag HTML dari objek yang terseleksi. Kita dapat meng-klik <body> untuk memilih keseluruhan elemen dokumen. Tag Selector ini terdapat pada Document Window, dan terletak di bawah sebelah kiri.

20 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

1.2.5

Panel Group Panel groups merupakan salah satu fasilitas yang terdapat pada Adobe Dreamweaver yang berfungsi untuk membantu dalam mengedit suatu halaman web. Panel Groups terletak di sebelah kanan layar kerja dan terdiri dari beberapa panel. Untuk menampilkan panel, klik ganda pada nama panel

1.2.6

Insert Panel

Insert Panel berfungsi untuk menyisipkan objek-objek ke dalam halaman web. Pada Insert Panel terdapat beberapa Tab diantaranya: - Common - Layout - Forms - Data - Spry - InContext Editing - Text - Favorites

21 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

1.2.6.1 Tab Common Pada tab ini terdapat tool yang digunakan untuk membuat dan menyisipkan objek ke dalam halaman web, seperti membuat hyperlink, tabel, gambar, media, dan lain sebagainya. Berikut keterangan fungsi dari tool-tool yang terdapat pada tab Common:

1.2.6.2 Tab Layout Tab ini berisikan tool-tool yang berfungsi untuk membuat layout halaman web, seperti membuat tabel, frame dan lain sebagainya. Berikut keterangan fungsi dari tool-tool pada tab layout:

22 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

1.2.6.3 Tab Forms Tab ini membuat tampilan website menjadi lebih interaktif karena pengguna dapat memberikan input pada sistem atau website dengan menggunakan tool yang ada dalam tab Forms. Berikut Keterangan fungsi dari tool-tool yang ada pada tab Forms:

1.2.6.4 Tab Data Tab data pada dreamweaver berfungsi untuk memasukkan object dat model spry dan elemenelemen dinamis lainnya seperti Recordset, Repeated Regions, Insert Record, Update Record, Delete Record, dan lain sebagainya.

23 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

1.2.6.5 Tab Spry Tab Spry berisikan tombol-tombol untuk membuat halaman-halaman Spry, termasuk object data spry. Spry merupakan library JavaScript yang dapat digunakan untuk mendesain halaman web, seperti membuat menu bar, textarea, text field, dan lain sebagainya dengan hasil yang lebih menarik.

1.2.6.6 Tab InContext Editing Pada tab InContext Editing terdapat tombol-tombol yang berfungsi untuk membuat Repeating Region, Editable Region, dan Manage Available CSS Clases. Repeating dan Editable Region digunakan untuk membuat template halaman web.

1.2.6.7 Tab Text Tab Text berfungsi untuk mengatur format teks, paragraf, maupun karakter teks lainnya. Berikut keterangan fungsi dari tool-tool yang ada pada tab Text:

24 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

1.2.6.8 Tab Favorites Tab ini berfungsi untuk menambahkan isi dari tab-tab ke dalam tab Favorites seperti Table Row, Hyperlink, Comment, Dynamic Text, dan lain sebagainya. Untuk menambahkan isi tab ke dalam tab Favorites dapat menggunakan cara berikut:

menekan tombol OK.

1.2.7

CSS Style Panel

CSS Styles panel merupakan fasilitas pada dreamweaver yang berfungsi untuk mengatur script CSS agar halaman web menjadi lebih menarik. CSS Styles dan terdiri dari dua mode, yaitu mode All dan mode Current. Mode All terdiri dari dua panel, yaitu All Rules dan Properties. Panel All Rules menampilkan list atau daftar stylesheet dari dokumen halaman web yang diseleksi, sedangkan panel Properties akan menampilkan isi atau atribut dari stylesheet yang diseleksi pada panel All Rules. Mode Current terdiri dari tiga panel yaitu panel Summary for Selection, panel About, dan panel Properties. Panel Summary for Selection menampilkan isi dari CSS, panel About menampilkan informasi lokasi dari script CSS yang diseleksi, sedangkan panel Properties menmpilkan isi atau atribut dari stylesheet yang diseleksi. Files Panel

1.2.8

Files panel pada dreamweaver merupakan fasilitas yang berfungsi untuk mengelola file-file dari dokumen web. Kita dapat dengan mudah mengelola file-file tersebut di folder, jaringan komputer, maupun secara remote.

25 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

1.2.9

Assets Panel Assets panel berfungsi untuk mengelola asset-asset dari sebuah website seperti file image, file movie, dan lain sebagainya.Assets Panel membagi asset-asset menjadi beberapa kategori, diantaranya Images, Colors, URLs, SWF, Shockwave, Movies, Scripts, Templates, dan Library.Berikut contoh tampilan Assets dari kategori Images.

1.2.10 Property Inspector Pada Adobe Dreamweaver terdapat fasilitas Property Inspector yang berfungsi untuk mengatur atau mengedit properti objek-objek yang ada pada halaman web. Property Inspector menampilkan semua properti objek ( misalnya objek teks, objek gambar, objek tabel) yang terseleksi pada jendela kerja. DalamProperty Inspector , Kita dapat dengan mudah mengatur atau mengedit properti objek, yaitu dengan memasukkan nilai-nilai parameter yang disediakan. Secara umum, Property Inspector terdiri dari Page Property, Image Property, Table Property, dan Form Property.

1.2.10.1 Page Property Inspector Setiap membuka aplikasi Dreamweaver, Property Inspector yang pertama tampil adalah properti halaman untuk mengelola teks, paragraf, maupun style (CSS). Page Property Inspector tersebut terbagi menjadi dua pilihan, yaitu HTML dan CSS.Untuk memilih salah satu Property Inspector tersebut, Kita dapat menekan tombol yang ada di sebelah kiri dari Property Inspector.

Gambar HTML Property Inspector

Gambar CSS Propety Inspector

26 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Keterangan gambar di atas: 1.2.10.2 Format berfungsi untuk mengatur teks dalam bentuk paragraf ataupun heading. Class berfungsi untuk menyisipkan class dari CSS Style pada halaman web. Link berfungsi untuk memberikan hyperlink. Targeted Rule menampilkan properti CSS yang ada dalam objek pada halaman web yang terpilih. Tombol Edit Rule digunakan untuk mengedit perintah atau script dari CSS pada objek yang terpilih. Tombol panel CSS untuk mengaktifkan dan membuka CSS Style Panel. Font menampilkan jenis font yang digunakan pada teks yang diseleksi dan digunakan untuk memformat jenis font. Size digunakan untuk mengatur ukuran font pada teks. Tombol B, I digunakan untuk mengatur format teks menjadi huruf tebal atau bold(B), dan cetak huruf miring atau italic(I). Tombol Align Left berfungsi untuk mengatur halaman menjadi rata kiri/ left. Tombol Align Center berfungsi untuk mengatur halaman menjadi rata tengah/ center. Tombol Align Right berfungsi untuk mengatur halaman menjadi rata kanan/ right. Tombol Justify berfungsi untuk mengatur halaman menjadi rata kanan koro/ justify. Color ditandai dengan ikon digunakan untuk mengatur warna yang akan dipakai.

Image Property Inspector

Jika Kita memilih objek gambar pada jendela kerja, maka tampilan dari Property Inspector akan berbeda dari sebelumnya. Berikut tampilannya.

Image menampilkan besar file gambar dan ukuran dari gambar tersebut. Src berfungsi untuk menampilkan lokasi file gambar. Untuk mengganti gambar, tekan tombol , lalu pilih gambar yang diinginkan. Link berfungsi untuk memberikan link pada gambar. Alt berfungsi untuk memberikan keterangan berupa teks pada gambar Edit berfungsi untuk mengedit gambar dengan memanggil program eksternal, ataupun secara langsung. Class berfungsi untuk menyisipkan class dari CSS Style pada gambar. Map berfungsi untuk memberikan pemetaan status atau hotspot pada area gambar. V Space berfungsi untuk memberikan jarak pada gambar dengan objek lain secara vertikal. H Space berfungsi untuk memberikan jarak pada gambar dengan objek lain secara horizontal.

27 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

 1.2.10.3

Target berfungsi untuk memberikan target link, biasanya digunakan pada frame. Original berfungsi untuk memasukkan gambar berformat *.psd dan *.png. Border berfungsi untuk memberikan border pada gambar. Align berfungsi untuk mengatur posisi gambar.

Table Property Inspector

Jika Kita menyeleksi tabel pada jendela kerja, maka tampilan dari Property Inspector menjadi seperti berikut:

Rows menampilkan jumlah baris yang ada pada tabel. Cols menampilkan jumlah kolom yang ada pada tabel. W (Width) berfungsi untuk mengatur ukuran tabel. Cellpad berfungsi untuk mengatur jarak antara cell dengan isi tabel. CellSpace berfungsi untuk mengatur jarak antar cell. Align berfungsi untuk mengatur posisi tabel. Border berfungsi untuk memberikan ketebalan garis tabel. Class berfungsi untuk menyisipkan class dari CSS Style.

28 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 5 : Pengenalan tag-tag HTML5 CSS3

Tag-tag yang berlaku pada HTML 5
Deskripsi Mendefinisikan sebuah komentar Mendefinisikan tipe dokumen Mendefinisikan sebuah hyperlink Mendefinisikan sebuah singkatan Mendefinisikan informasi kontak untuk pemilik atau penulis dokumen/artikel Mendefinisikan area didalam sebuah gambar New Mendefinisikan artikel New Mendefisikan isi selain dari konten utama New Mendefinisikan suara/music Mendefinisikan cetak tebal dalam teks (bold) Menentukan URL dasar/target untuk semua URL relatif dalam dokumen New Membatasi bagian teks yang mungkin memiliki format baca berbeda dengan teks diluarnya <bdo> Mengganti arah teks saat ini <blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber lain <body> Mendefinisikan tubuh dokumen <br> Mendefinisikan perintah untuk ganti satu baris <button> Mendefinisikan tombol yang dapat di-klik New <canvas> Digunakan untuk menggambar grafis melalui script <caption> Mendefinisikan caption untuk tabel <cite> Mendefinisikan judul suatu objek <code> Mendefinisikan suatu teks berupa kode-kode computer <col> Menentukan properties dari kolom didalam element <colgroup> <colgroup> Menentukan kelompok satu atau lebih kolom dalam format sebuah tabel New <command> Mendefinisikan sebuah tombol komando (command button) New <datalist> Menentukan daftar pilihan standar untuk kontrol input <dd> Mendefinisikan deskripsi sebuah item yang ada pada definition list <del> Mendefinisikan efek strikethrough pada kalimat teks New <details> Mendefinisikan detail tambahan yang dapat ditampil-sembunyikan oleh user <dfn> Mendefinisikan definition term <div> Mendefinisikan section dalam dokumen <dl> Mendefinisikan sebuah definition list <dt> Mendefinisikan istilah (term) dalam definition list <em> Mendefinisikan efek emphasized pada teks New <embed> Mendefinisikan sebuah aplikasi eksternal / plugins <fieldset> Mengelompokkan elemen-elemen yang mirip dalam bentuk form New <figcaption> Mendefinisikan caption untuk elemen <figure> New <figure> Menentukan sebuah konten mandiri 29 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS Tag <!-- <!DOCTYPE> <a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdi>

New

<footer> <form> <h1> to <h6> <head> New <header>

New <hgroup>

<hr> <html> <i> <iframe> <img> <input> <ins>

New <keygen>

<kbd> <label> <legend> <li> <link> <map>

New <mark>

<menu> <meta> New <meter> New <nav> <noscript>

<object> <ol> <optgroup> <option> New <output> <p> <param> <pre> New <progress> New <q> <rp>
New

Mendefinisikan sebuah footer pada dokumen atau section Mendefinisikan sebuah form untuk input user Mendefinisikan heading untuk HTML Mendefinisikan informasi yang terkait dengan dokumen Menentukan pengenalan awal halaman web atau kelompok dari elemen navigasi untuk dokumen Mengelompokkan elemen <h1> sampai <h6> ketika heading memiliki multiple level Mendefinisikan sebuah penanda perubahan tematik dalam konten Mendefinisikan akar dari dokumen HTML Mendefinisikan efek italic pada teks Mendefinisikan sebuah frame Mendefinisikan sebuah gambar Mendefinisikan sebuah kontrol input Mendefinisikan teks yang telah dimasukkan dalam dokumen (diikuti efek underline) Mendefinisikan sebuah key generator untuk form Mendefinisikan input dari keyboard (format teks) Mendefinisikan label untuk elemen <input> Mendefinisikan sebuah caption untuk elemen <fieldset>, <figure> dan <details> Mendefinisikan daftar item Mendefinisikan relasi diantara dokumen dan sebuah sumber eksternal, kebanyakan digunakan untuk merelasikan kepada CSS Mendefinisikan sebuah gambar yang dapat berfungsi sebagai client-side map Mendefinisikan sebuah teks yang disorot/ditandai Mendefinisikan sebuah daftar/menu Mendefinisikan sebuah metadata tentang dokumen HTML Mendefinisikan pengukur untuk ukuran skalar dalam kisaran yang diketahui Mendefinisikan link navigasi Mendefinisikan sebuah konten alternatif untuk pengguna yang telah menonaktifkan script pada browser atau memiliki browser yang tidak mendukung script tersebut Mendefinisikan objek yang melekat di dalam dokumen HTML, contohnya file multimedia Mendefinisikan numbered list Mengelompokkan opsi-opsi yang terkait ke dalam bentuk drop-down Mendefinisikan sebuah pilihan dalam bentuk drop-down Mendefinisikan sebuah hasil dari kalkulasi/perhitungan Mendefinisikan sebuah paragraph Mendefinisikan sebuah parameter untuk objek Mendefinisikan teks yang belum ditentukan formatnya Mendefinisikan sebuah perkembangan jalannya proses Mendefinisikan sebuah kalimat kutipan (quote) Mendefinisikan apa yang harus ditampilkan apabila browser tidak mensupport tag <ruby>

30 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

New <rt> New <ruby>

<s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> <title> <tr> <track> <ul> <var> <video> <wbr>

New

New

New

New

New

New New

Mendefinisikan penjelasan atau cara baca dari karakter Asia timur ( <ruby> ) Menentukan sebuah penulisan huruf Asian (kanji, mandarin, dll) Menentukan teks yang tidak lagi benar, akurat atau relevan (diikuti efek strikethrough) Mendefinisikan sampel output dari program computer (format teks) Mendefinisikan sebuah script Mendefiniskan section dalam dokumen Mendefinisikan sebuah list dalam bentuk drop-down Mendefinisikan teks yang lebih kecil (format teks) Mendefinisikan sumber elemen media yang beruntun ( <video> dan <audio> ) Mendefinisikan section dalam dokumen Mendefinisikan teks penting (format teks) Menyimpan info style sebuah dokumen Mendefinisikan teks subsricpt Mendefinisikan heading untuk bagian <detail> Mendefinisikan teks superscript Mendefinisikan sebuah tabel Mengelompokkan bagian tubuh (body) dari tabel HTML Mendefinisikan sebuah cell dalam tabel Mendefinisikan kontrol input yang terdiri dari banyak baris Mengelompokkan bagian footer dari tabel HTML Menentukan dalam tabel bahwa didalam tag <th> adalah header tabel Mengelompokkan bagian header dari tabel HTML Mendefinisikan waktu (24 jam) atau tanggal dalam format Gregorian Mendefinisikan judul dokumen Mendefinisikan sebuah baris dalam tabel Mendefinisikan subtitle dari elemen multimedia ( <audio> dan <video> ) Mendefinisikan bulleted list Mendefinisikan sebuah variable Mendefinisikan video atau film Mendefinisikan ganti baris ketika teks dirasa terlalu panjang

31 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Penjelasan tag <video>

Pada versi HTML sebelumnya, tidak disertai oleh tag <video>.Apabila ingin memasukkan video ke dalam sebuah web masih harus menggunakan plugins tambahan yang biasa disebut flash player. Kelebihan di dalam tag <video> adalah dalam browser tidak perlu menggunakan flash player, dan buffering menjadi lebih ringan karena fasilitasnya sudah di backing oleh kode HTML sendiri

Atribut Opsional :
Attribute autoplay controls height loop muted poster preload Value autoplay controls pixels loop muted URL auto metadata none URL pixels Description Menentukan bahwa video akan mulai berputar otomatis Menentukan kontrol video yang akan ditampilkan (Contoh: tombol play/pause) Mengeset tinggi dari video player Menentukan bahwa video akan berputar kembali meski video telah habis Menentukan bahwa output suara akan di mute / dihilangkan Menentukan gambar yang akan tampil ketika video masih belum berputar Menentukan jika dan bagaimana kapan video ini harus menjalani proses loading ketika halaman terbuka Menentukan alamat URL dari mana sumber video Mengeset lebar dari video player

src width

Contoh kode tag <video>

<!DOCTYPE html> <html> <body> <video width="320" height="240" controls="controls" > <source src="bbb.mp4" type="video/mp4" /> <source src="bbb.ogg" type="video/ogg" /> <source src="bbb.webm" type="video/webm" /> Your browser does not support the video tag. </video> </body> </html>

32 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Output yang akan muncul dalam browser

<video width="320" height="240" controls="controls" >

ATTRIBUT OPSIONAL

Penjelasan tag <audio>

Digunakan untk memasukkan audio, misalnya lagu kedalam halaman web. Pada HTML5, hal itu dipermudah dengan tag <audio>, ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.

Atribut opsional :
Attribute autoplay controls loop Value autoplay controls loop Description Menentukan bahwa audio akan mulai berputar otomatis Menentukan kontrol audio yang akan ditampilkan (Contoh: tombol play/pause) Menentukan bahwa audio akan berputar kembali meski

33 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

preload

src

auto metadata none URL

audiotelah habis Menentukan jika dan bagaimana kapan audio ini harus menjalani proses loading ketika halaman terbuka Menentukan alamat URL dari mana sumber audio

Contoh tag <audio>

<!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="multimedia/song.ogg" type="audio/ogg" /> <source src="multimedia/song.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio> </body> </html>

Output yang akan muncul dalam browser

34 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Sintaks-sintaks yang berlaku pada CSS3

Introduction
Sintaks-sintaks CSS3 terbagi menjadi modul-modul. Beberapa dari modul yang paling penting dalam CSS3 adalah 1. 2. 3. 4. 5. 6. 7. 8. Selectors Box Model Backgrounds and Borders Text Effects 2D/3D Transformations Animations Multiple column Layout User Interface

Kenyataannya, saat ini spesifikasi CSS3 sendiri masih dalam pengembangan oleh W3C (World Wide Web Consortium).Namun banyak dari property baru CSS3 telah diimplementasikan ke dalam browserbrowser terbaru saat ini.

CSS3 Borders
Dengan CSS3, kamu dapat membuat border dengan bentuk yang tak selalu kotak, menambahkan efek shadow dalam objek, dan menggunakan gambar sebagai border tanpa menggunakan program desain seperti Photoshop. Di bagian ini akan mempelajari tentang border properties seperti ini: border-radius border-shadow border-image

Internet Explorer 9 hanya support dua dari properties border terbaru Firefox membutuhkan prefix moz- untuk menampilkan border-image Chrome dan Safari membutuhkan prefix webkit- untuk menampilkan border-image Opera membutuhkan prefix o- untuk menampilkan border-image

35 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Property dari fasilitasborders

Property border-image Description Sebuah wadah untuk mensetting seluruh property dari borderimage Values -source: none|image; -slice: number| % | fill; -width: number | % | auto; -outset: length | number; -repeat: stretch | repeat | round; length % h-shadow v-shadow blur spread color inset

border-radius

box-shadow

Sebuah wadah untuk mensetting seluruh dari 4 ujung-ujung border (radius) Menempelkan satu atau lebih efek bayangan pada border

36 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Contoh-contoh implementasi border dalam CSS3 CSS3 Rounded Corners

<!DOCTYPE HTML > <html> <head> <style type="text/css"> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ } </style> </head> <body> <div>Dengan CSS3, kita bisa membuat border yang tidak selalu berbentuk kotak dengan mudah.</div> </body> </html>

CSS3 Box Shadow

<!DOCTYPE HTML > <html> <head> <style type="text/css"> div { width:300px; height:100px; background-color:yellow; -moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */ box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>

37 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

CSS3 border-image
<!DOCTYPE HTML > <html> <head> <style type="text/css"> div { border-width:15px; width:250px; padding:10px 20px; } #round { -moz-border-image:url(images/border.png) 30 30 round; /* Firefox */ -webkit-borderimage:url(images/border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(images/border.png) 30 30 round; /* Opera */ border-image:url(images/border.png) 30 30 round; } #stretch { -moz-border-image:url(images/border.png) 30 30 stretch; /* Firefox */ -webkit-borderimage:url(images/border.png) 30 30 stretch; /* Safari and Chrome */ -o-border-image:url(images/border.png) 30 30 stretch; /* Opera */ border-image:url(images/border.png) 30 30 stretch; } </style> </head> <body> <div id="round">Border ini hasil dari pengulangan bagian dari gambar yang tersedia.</div> <br /> <div id="stretch">Kalau disini, bordernya ditarik hingga memenuhi tempat yang tersedia.</div> <p>Dari gambar inilah border terbuat:</p> <img src="images/border.png" /> </body> </html>

38 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

CSS3 Background
CSS3 memiliki beberapa background porperties baru disbanding dengan versi sebelumnya yang memungkinkan kita dalam maksimalisasi kontrol dari elemen background Di sesi ini kita akan mempelajari : background-size background-origin

Pada Firefox 3.6 dan sebelumnya tidak men support fasilitas background-origin dan memerlukan prefix moz- untuk men support fasilitas background-property Safari 4 sendiri memerlukan prefix webkit- untuk bisa support fasilitas diatas Internet Explorer 9, Firefox 4, Chrome, Safari 5 dan Opera telah support fasilitas background

Property dari fasilitas background Property Description background-clip Menentukan area pewarnaan dari background images backgroundorigin background-size Menentukan letak dari background images

Menentukan ukuran dari background images

Values border-box padding-box content-box border-box padding-box content-box panjang persentase cover contain

39 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Contoh implementasi background-size

<!DOCTYPE HTML > <html> <head> <style type="text/css"> body { background:url(images/img_flwr.gif); background-size:80px 60px; -moz-background-size:80px 60px; /* Firefox 3.6 */ background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p> Hasil dari pengubahan ukuran dari gambar menjadi lebih kecil </p> <p>Original image: <img src="images/img_flwr.gif" alt="Flowers" width="224" height="162" /></p> </body> </html> <!DOCTYPE HTML > <html> <head> <style type="text/css"> div { background:url(img_flwr.gif); background-size:100% 100%; -moz-background-size:100% 100%; /* Firefox 3.6 */ background-repeat:no-repeat; } </style> </head> <body> <div> Hasil dari percobaan background menggunakan salah satu gambar yang telah disediakan sebelumnya. Untuk merubah properties background, coba ubah nilai persen dari klausa background-size. Karena pada klausa background-repeat diisi dengan norepeat, maka pada web hanya akan tampak satu (tunggal) gambar. </div> </body> </html>

40 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

CSS3 background-origin
Fasilitas background origin menentukan posisi area untuk sebuah gambar yang akan dijadikan background (background-image) Background-image dapat ditempatkan di dalam area content-box, padding-box atau border-box

Contoh impelentasi background-origin

<!DOCTYPE HTML > <html> <head> <style type="text/css"> div{ border:5px solid black; padding:55px; background-image:url('images/bintang.png'); background-repeat:no-repeat; background-position:left; } #div1{ background-origin:border-box; } #div2{ background-origin:content-box; } #div3{ background-origin:padding-box; } </style> </head> <body> <p>background-origin:border-box:</p> <div id="div1"> Sesi background-origin, dalam area ini gambar akan tampil di area border-box, dimana background image akan menempel pada border. Itulah maksud dari istilah border-box. </div> <p>background-origin:content-box:</p> <div id="div2"> Sesi background-origin, dalam area ini gambar akan tampil di area content-box, dimana background image akan muncul dibelakang teks/content yang ditulis. </div> <p>background-origin:padding-box:</p> <div id="div3"> Sesi background-origin, dalam area ini gambar akan tampil di area padding-box, dimana ada ruang antara border dengan content, disanalah yang disebut dengan area paddingbox. </div> </body> </html>

41 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Contoh output pada implementasi background-origin

42 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

CSS3 Transform
Dengan CSS3 transform, kita bisa Memindah memperbesar atau memperkecil, membelokkan, memutar dan merenggangkan element scale, turn, spin, and stretch elements.

Bagaimana Cara kerjanya?

Sebuah efek Transformasi yang memungkinkan sebuah elemen berubah bentuk, ukuran dan posisinya.

Browser yang mendukung

Internet Explorer 9 membutuhkan awalan -ms-. Firefox membutuhkan awalan -moz-. Chrome and Safari membutuhkan awalan -webkit-. Opera membutuhkan awalan -o-.

Transformasi 2D
Pada Bagian ini anda akan belajar tentang transformasi 2D dengan beberapa metode :

translate() rotate() scale() skew() matrix()

Metode translate()

43 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Dengan metode translate() , element berpindah dari posisi awal tergantung dari paremeter yang diberikan untuk posisi kiri (sumbu - X) dan untuk posisi atas (sumbu Y)

Contoh
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }

nilai translate(50px,100px) memindahkan elemen sejauh 50 pixels dari kiri ke kanan dan 100 pixels dari atas ke bawah.

Metode rotate() (Memutar)

Dengan metode rotate() method, elemen diputar sesuai dengan derajat yang diberikan searah jarum jam . Nilai negatif diperbolehkan dan akan memutar berbalik arah jarum jam.

Contoh
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }

44 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Nilai rotate(30deg) memutar elemen sejauh 30 drajat searah jarum jam.

Metode scale()

Dengan Metode scale()kita bisa memperbesar atau memperkecil ukuran elemen, sesuai dengan parameter yang diberikan untuk lebar (Sumbu X) dan tinggi(Sumbu-Y):

Contoh
div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }

Nilai scale(2,4) Merubah ukuran Lebar elemen menjadi dua kali ukuran awal dan ukuran tinggi empat kali ukuran awal.

Metode skew()

Dengan metode skew(), elemen berbelok sesuai dengan sudut yang diberikan, sesuai dengan parameter yang diberikan untuk horisontal(Sumbu-X) dan vertikal(Sumbu-Y)

Contoh
div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

45 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

-o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }

Nilai skew(30deg,20deg) membelok elemen 30 derajat untuk sumbu X dan 20 derajat untuk sumbu Y.

Metode matrix()

Metode matrix()mengkombinasikan semua transformasi 2D menjadi satu. Metodematrik meminta 6 parameter,mengandung fungsi matematika , yang mengijinkan anda untuk : rotate, scale, move (translate), dan skew elemen.

Contoh
bagaimana carnya untuk memutar sebuah elemen div 30 derajat menggunakan metode matrix, , menggunakan metode matrik:
div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }

Metode-metode Transformasi 2D
fungsi matrix(n,n,n,n,n,n) translate(x,y) translateX(n) translateY(n) scale(x,y) scaleX(n) scaleY(n) Deskripsi Mendefinisikansebuah transformasi 2D, menggunakan matrix dengan 6 nilai Mendefinisikansebuah transformasi 2D, memindahkan elemen sejauh sumbu-X dan sumbu-Y Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-X Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-Y Mendefinisikansebuah transformasi 2D, Merubah lebar dan panjang elemen Mendefinisikansebuah transformasi 2D, Merubah lebar elemen Mendefinisikansebuah transformasi 2D, Merubah panjang elemen

46 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

rotate(angle) skew(x-angle,yangle) skewX(angle) skewY(angle)

Mendefinisikansebuahrotasi 2D, yang derajatnya ditetapkan pada parameternya Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X dan sumbu-Y Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-Y

Efek Text
CSS3 menyediakan beberapa fitur text baru. Pada bagian ini anda akan belajar tentang properti text di bawah ini:

text-shadow word-wrap

Internet Explorerbelum mendukung properti text-shadow. Firefox, Chrome, Safari, dan Operamendukungproperti text-shadow. Semua bowser utaman mendukung properti word-wrap.

Bayangan Text di CSS3

Di CSS3,properti text-shadow. di gunakan untuk bayangan text.

Kamu bisa menetapkan bayangan horisontal dan vertikalpanjang bayangan dan warna bayangan :

Contoh
Menambahkan sebuahbayangankesebuah header:
h1 { text-shadow: 5px 5px 5px #FF0000; }

47 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

CSS3 Word Wrapping

Jika suatu tulisan terlalu panjang untuk suatu area,tulisan akan meluas keluar area: Paragraf ini berisi kata yang sangat panjang : Iniadalahkatayangsangatsangatsangaatsangatsangatpanjang. Kata yang sangat panjang akan keluar area. Di CSS3,properti word-wrap mengijinkan anda untuk memaksa tulisan unntuk tidak keluar area sejauh jika itu berarti membagi tulisandi tengah-tangah kata : Paragraf ini berisi kata yang sangat panjang : Iniadalahkatayangsangats angatsangaatsangatsangat panjang. Kata yang sangat panjang akan keluar area. Kode CSS nya seperti di bawah ini :
p {word-wrap:break-word;}

48 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Properti Text Yang Baru

Properti hanging-punctuation punctuation-trim text-align-last Deskripsi Menetapkan apakah sebuah karakter tanda baca boleh diletakkan diluar kotak. Memungkinkan apakah karakter tanda baca akan dipotong Mendeskripiskan baris terakhir dari sebuah area atau baris kanan sebelum memaksa untuk di potong ketika tulisan rata tengah "justify" Memberikan tanda empasis, dan warna bagian depan dari tanda empasis untuk elemen text Menetapkan metode justification digunakan ketika text rata tengah "justify" Menetapkan garis luar text outline Menetapkan apa yang akan terjadi ketika text ditimpa(overflows) elemen Menambahkan bayangan ke text Menetapkan pemotongan text untuk text yang panjang agar tidak keluar batas atau kotak Melakukan pemotongan kalimat yang panjang dan memindahnya baris yang baru

text-emphasis text-justify text-outline text-overflow text-shadow text-wrap word-wrap

49 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 6 : 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.

1.

Membuat File index.html Pada Adobe Dreamweaver kita sudah dimudahkan untuk urusan yang satu ini. Untuk membuat file baru dengan tipe HTML5, kita cukup mengikuti menu File-New (Ctrl+N), lalu akan muncul jendela seperti berikut

Gambar 1.1, Membuat File Baru dengan tipe HTML5

Maka secara otomatis, <!DOCTYPE> yang digunakan akan lansung menjadi HTML5, seperti gambar berikut

50 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Gambar 1.2, Script HTML5 yang telah di generate oleh Adobe Dreamweaver CS5

Lalu kita simpan file tersebut di suatu folder dengan nama index.html. Ikuti menu File-Save (Ctrl+S)

Gambar 1.3, Simpan Dokumen dengan nama index.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. Sama dengan membuat index.html, ikuti menu File-New

Gambar 1.4, Membuat File style.css

Kemudian akan muncul tab baru dengan isi file masih kosong.

51 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Gambar 1.5, File CSS

Kemudian, simpan dengan nama style.css pada direktori yang sama dengan index.html.

Gambar 1.6, Menyimpan File style.css

Setelah kedua file tersebut kita simpan, kita akan menghubungkan keduanya. Buka file index.html, tambahkan sintaks berikut di dalam tag <head>.
<link rel="stylesheet" href="style.css" type="text/css">

Sehingga, penampakan kode pada index.html adalah sebagai berikut

52 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Gambar 1.7, Penampakan index.html setelah dihubungkan dengan style.css

3.

Menentukan Layout di File index.html Langkah selanjutnya kita akan membuat layout pada index.html tanpa menggunakan metode Slicing pada Photoshop. Sehingga kita langsung melakukan pengkodean pada index.html. Pertama, kita tentukan dahulu seperti apa layout yang akan kita buat. Misal kita akan buat layout seperti contoh berikut

Header

Main Menu

Content

Sidebar

Footer 1

Footer 2

Footer 3

Gambar 1.8, Contoh Layout

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

<div id="wrapper"> <div id="container"> <header>HEADER</header> <!--HTML5 --> <nav>MENU</nav> <!--HTML5 --> <div id="content">CONTENT</div> <div id="sidebar">SIDEBAR</div> <footer> <!--HTML5 --> <div id="column">KOLOM 1</div> <div id="column">KOLOM 2</div>

53 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

<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 mengg unakan tag <div>. Tag <footer> pun demikian, dirancang untuk mengganti <div id=footer>

54 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

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; }

Buka file index.html melalui browser.

Gambar 1.9, Uji Coba File di Browser Mozilla Firefox 8.0

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; background:#CCC; width:960px; } footer #column{

55 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

width:300px; padding:10px; float:left; }

Penjelasan dari properti yang digunakan tersebut sebagai berikut

Width & Height Float : Menentukan Lebar dan Tinggi dari suatu elemen. : 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; : Untuk memberi background pada sebuah elemen, bisa berupa warna atau gambar. : Jarak antara tepi elemen dengan konten di dalamnya

Background Padding

Gambar 1.10, Layout yang Siap dikembangkan

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

56 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Gambar 1.11, Header yang telah diganti

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>

57 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Kemudian kita ganti dan tambah style nav{} dengan style seperti berikut
nav{ width:958px; float:left; overflow:auto; background:#DFDFDF; border:#AAAAAA 1px solid; } ul{ list-style:none; float:left; overflow:auto; margin:0px; padding:0px; } ul li{ display:block; padding:5px 10px 5px 10px; float:left; margin:0px; border-right:#AAAAAA 1px solid; } ul li .submenu{ display:none; } ul li:hover .submenu{ display:block; margin:0px; width:100px; position:absolute; margin-top:5px; border:#AAAAAA 1px solid; background:#DFDFDF; margin-left:-11px; } ul li:hover .submenu li{ display:block; width:89px; padding:5px; float:left; border:none; } ul li:hover{ background:#EDEDED; } ul li a{ color:#000000; text-decoration:none; } ul li a:hover{ text-decoration:underline; }

nav

nav

nav

nav

nav

nav

nav

nav

58 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Sehingga kita akan menghasilkan halaman seperti berikut.

Gambar 1.12, Navigation Menu

7.

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

Featured Image

Judul 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>

59 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

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 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>

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.otf"); font-weight:normal; } @font-face{ font-family:"Calibri"; src:url("fonts/calibri.ttf"); font-weight:normal;

60 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

} 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; 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;

61 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

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

Gambar 1.13, Konten

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;

62 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

text-shadow:#000 2px 2px 1px; }

Sehingga akan kita dapatkan hasil sebagai berikut

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;

63 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

padding:10px; } #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. Parikesit 75<br> Surabaya 66666 Jawa Timur<br> (+6231) 5556667 </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; padding:10px; float:left; font-size:14px;

64 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

} 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; }

65 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

#wrapper{ width:980px; margin:auto; } #container{ 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 Untitled Document. Misalnya kita ganti judul menjadi :: Direct News Access :: Deliver News Fastly :: Sehingga kita dapatkan hasil sebagai berikut

66 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

67 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 7 : 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 Krakatauberkali-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 gulitalampu gas menyala sepanjang malamtak 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 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>

68 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

<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; }

Sehingga kita dapatkan hasil single-post sebagai berikut

69 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

BAB 8 : 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;

70 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

font-weight:normal; } #wrapper #content #single h2.video-title a:hover{ text-decoration:underline; }

Sehingga kita dapatkan hasil sebagai berikut

Gambar 2.1, Halaman Galeri Video

2. Halaman video-1.html Selanjutkan kita akan membuat halaman detail video, kita salin juga file index.html menjadi video1.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>

Sehingga kita dapatkan tampilan single video seperti berikut

71 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Gambar 2.2, Video dengan Format MP4 pada Firefox

Gambar 2.3, Video dengan Format MP4 pada Firefox

3. Halaman video-2.html Untuk membuat video kedua, kita salin file video-1.html kemudian rubah namanya menjadi video2.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>

72 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

<video controls> <source src="videos/Dapur Umami - Chicken Wings.webm" type="video/webm" /> Your browser does not support the video tag. </video> </div>

Sehingga kita dapatkan tampilan video kedua sebagai berikut

Gambar 2.4, Video dengan Format WEBM pada Firefox.

73 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

4. Halaman video-3.html Sama dengan video kedua, kita hanya perlu menyalin video-1.html dan mengganti filename nya 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 audio tag. </video> </div>

Sehingga kita dapatkan output seperti berikut

Gambar 2.5, Video dengan Format OGG pada Firefox

Dari ketiga Format video diatas, dapat kita ambil beberapa kesimpulan bahwa Format Video Browser Yang Mendukung MP4 Chrome WebM Chrome OGG Chrome + Firefox

74 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS

Daftar Pustaka
Anonym, HTML5 Tutorial http://www.w3schools.com/html5/default.asp (diakses tanggal 4 Desember 2011) Anonym, CSS3 Tutorial http://www.w3schools.com/css3/default.asp (diakses tanggal 4 Desember 2011) Kompas.com, Penemuan telegram kabarkan dahsyatnya letusan Krakatau http://sains.kompas.com/read/2011/12/05/20232133/Penemuan.Telegram.Kabarkan.Dahsyatnya.Letus an.Krakatau (diakses tanggal 4 Desember 2011) Kompas.com, Pesawat tanpa awak UGM berdaya jelajah 200 Kilometer http://sains.kompas.com/read/2011/11/30/13051652/Pesawat.Tanpa.Awak.UGM.Berdaya.Jelajah.200. Kilometer (diakses tanggal 4 Desember 2011) Kompas.com, Seperlima gletser Himalaya mencair http://sains.kompas.com/read/2011/12/05/18515156/Seperlima.Gletser.Himalaya.Mencair (diakses tanggal 4 Desember 2011) Kompas.com, Asteroid Vesta dalam video 3D http://sains.kompas.com/read/2011/12/05/17464790/Asteroid.Vesta.dalam.Video.3D (diakses tanggal 4 Desember 2011) Kompas.com, Prasasti Maya bukan petunjuk kiamat http://sains.kompas.com/read/2011/12/02/10510232/Prasasti.Maya.Bukan.Petunjuk.Kiamat (diakses tanggal 4 Desember 2011) http://www.youtube.com/watch?v=REJWOjqNL3s

75 | P a g e Pelatihan Desain Web Himpunan Mahasiswa Teknik Informatika PENS-ITS