HTML 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 pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.
HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak]] pembuat web.
Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application 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.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEOApple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."
What’s 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.
<article>
Unsur-unsur semantik baru yang disediakan HTML5 adalah:
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.
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
|
• password
• reset
• radio
• submit
• text
|
|
Macam - macam jenis input form baru di HTML 5:
• color • month
|
|
• time
|
• date • number
• datetime • range
• datetime-local • search
• email • tel
|
|
• 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:
#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
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 menggunakan column-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). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.
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). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.
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 5
<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><head>
<title>Hobo Web LTD Scotland</title>
</head>
<body>
<header>
</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>
|
<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/comment- policy/">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/comment- policy/">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>
|
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. CSS3 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
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. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
4. 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:
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 (“).
ID Selector
Aturan penamaan ID:
1. Dapat mengandung huruf, angka, atau karakter garis bawah,
2. Karakter pertama harus berupa huruf atau karakter garis bawah,
3. Diawali dengan tanda #,
4. Jangan memberi nama id sama dengan value,
5. 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>
<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/css”href=”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>
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>
</tr>
<td></td>
<td></td>
</table>
Maka digunakan contextual selectors
Table tr td{ color: orange; font-family: arial;
Text-align:center;}
Contoh:
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
Gambar halaman awal Dreamweaver CS5
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.
Halaman Kerja Dreamweaver cs5
Pada Starter Page di atas pada CreateNew pilihlah HTML, maka tampilan dari Adobe Dreamweaver adalah sebagai berikut:
§ 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:
§ 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:
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:
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:
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:
Pengenalan tag-tag HTML5 CSS3
Tag
|
Deskripsi
|
<!--…Ã
|
Mendefinisikan sebuah komentar
|
<!DOCTYPE>
|
Mendefinisikan tipe dokumen
|
<a>
|
Mendefinisikan sebuah hyperlink
|
<abbr>
|
Mendefinisikan sebuah singkatan
|
<address>
|
Mendefinisikan informasi kontak untuk pemilik atau penulis dokumen/artikel
|
<area>
|
Mendefinisikan area didalam sebuah gambar
|
<article>
|
Mendefinisikan artikel
|
<aside>
|
Mendefisikan isi selain dari konten utama
|
<audio>
|
Mendefinisikan suara/music
|
<b>
|
Mendefinisikan cetak tebal dalam teks (bold)
|
<base>
|
Menentukan URL dasar/target untuk semua URL relatif dalam dokumen
|
<bdi>
|
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
|
<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
|
<command>
|
Mendefinisikan sebuah tombol komando (command button)
|
<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
|
<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
|
<embed>
|
Mendefinisikan sebuah aplikasi eksternal / plugins
|
<fieldset>
|
Mengelompokkan elemen-elemen yang mirip dalam bentuk form
|
<figcaption>
|
Mendefinisikan caption untuk elemen <figure>
|
<figure>
|
Menentukan sebuah konten mandiri
|
|
|
Tag-tag yang berlaku pada HTML
<rt>
|
Mendefinisikan penjelasan atau cara baca dari karakter Asia timur ( <ruby> )
|
<ruby>
|
Menentukan sebuah penulisan huruf Asian (kanji, mandarin, dll)
|
<s>
|
Menentukan teks yang tidak lagi benar, akurat atau relevan (diikuti efek
strikethrough)
|
<samp>
|
Mendefinisikan sampel output dari program computer (format teks)
|
<script>
|
Mendefinisikan sebuah script
|
<section>
|
Mendefiniskan section dalam dokumen
|
<select>
|
Mendefinisikan sebuah list dalam bentuk drop-down
|
<small>
|
Mendefinisikan teks yang lebih kecil (format teks)
|
<source>
|
Mendefinisikan sumber elemen media yang beruntun ( <video> dan <audio> )
|
<span>
|
Mendefinisikan section dalam dokumen
|
<strong>
|
Mendefinisikan teks penting (format teks)
|
<style>
|
Menyimpan info style sebuah dokumen
|
<sub>
|
Mendefinisikan teks subsricpt
|
<summary>
|
Mendefinisikan heading untuk bagian <detail>
|
<sup>
|
Mendefinisikan teks superscript
|
<table>
|
Mendefinisikan sebuah tabel
|
<tbody>
|
Mengelompokkan bagian tubuh (body) dari tabel HTML
|
<td>
|
Mendefinisikan sebuah cell dalam tabel
|
<textarea>
|
Mendefinisikan kontrol input yang terdiri dari banyak baris
|
<tfoot>
|
Mengelompokkan bagian footer dari tabel HTML
|
<th>
|
Menentukan dalam tabel bahwa didalam tag <th> adalah header tabel
|
<thead>
|
Mengelompokkan bagian header dari tabel HTML
|
<time>
|
Mendefinisikan waktu (24 jam) atau tanggal dalam format Gregorian
|
<title>
|
Mendefinisikan judul dokumen
|
<tr>
|
Mendefinisikan sebuah baris dalam tabel
|
<track>
|
Mendefinisikan subtitle dari elemen multimedia ( <audio> dan <video> )
|
<ul>
|
Mendefinisikan bulleted list
|
<var>
|
Mendefinisikan sebuah variable
|
<video>
|
Mendefinisikan video atau film
|
<wbr>
|
Mendefinisikan ganti baris ketika teks dirasa terlalu panjang
|
|
|
New
New
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
|
Value
|
Description
|
autoplay
|
autoplay
|
Menentukan bahwa video akan mulai berputar otomatis
|
controls
|
controls
|
Menentukan kontrol video yang akan ditampilkan (Contoh:
tombol play/pause)
|
height
|
pixels
|
Mengeset tinggi dari video player
|
loop
|
loop
|
Menentukan bahwa video akan berputar kembali meski video
telah habis
|
muted
|
muted
|
Menentukan bahwa output suara akan di mute / dihilangkan
|
poster
|
URL
|
Menentukan gambar yang akan tampil ketika video masih belum
berputar
|
preload
|
auto
metadata none
|
Menentukan jika dan bagaimana kapan video ini harus menjalani proses loading ketika halaman terbuka
|
src
|
URL
|
Menentukan alamat URL dari mana sumber video
|
width
|
pixels
|
Mengeset lebar dari video player
|
Contoh kode tag <video>
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
|
Value
|
Description
|
autoplay
|
autoplay
|
Menentukan bahwa audio akan mulai berputar otomatis
|
controls
|
controls
|
Menentukan kontrol audio yang akan ditampilkan (Contoh:
tombol play/pause)
|
loop
|
loop
|
Menentukan bahwa audio akan berputar kembali meski
|
|
|
audiotelah habis
|
preload
|
auto metadata
none
|
Menentukan jika dan bagaimana kapan audio ini harus menjalani proses loading ketika halaman terbuka
|
src
|
URL
|
Menentukan alamat URL dari mana sumber audio
|
Contoh tag <audio>
Output yang akan muncul dalam browser
Sintaks-sintaks yang berlaku pada CSS3
Introduction
Sintaks-sintaks CSS3 terbagi menjadi “modul-modul”. Beberapa dari modul yang paling penting dalam CSS3 adalah
1. Selectors
2. Box Model
3. Backgrounds and Borders
4. Text Effects
5. 2D/3D Transformations
6. Animations
7. Multiple column Layout
8. 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 browser- browser 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
Property dari fasilitasborders
Property
|
Description
|
Values
|
border-image
|
Sebuah wadah untuk mensetting seluruh property dari border- image
|
-source: none|image;
-slice: number| % | fill;
-width: number | % | auto;
-outset: length | number;
-repeat: stretch | repeat | round;
|
border-radius
|
Sebuah wadah untuk mensetting seluruh dari 4 ujung-ujung
border (radius)
|
length
%
|
box-shadow
|
Menempelkan satu atau lebih
efek bayangan pada border
|
h-shadow v-shadow blur spread color inset
|
<!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>
|
|
<!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>
|
|
Contoh-contoh implementasi border dalam CSS3 CSS3 Rounded Corners CSS3 Box Shadow
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-border- image: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-border- image: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>
CSS3 Background
CSS3 memiliki beberapa background porperties baru disbanding dengan versi sebelumnya yang memungkinkan kita dalam maksimalisasi kontrol dari elemen background
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
|
Values
|
background-clip
|
Menentukan area pewarnaan dari background images
|
border-box padding-box
content-box
|
background- origin
|
Menentukan letak dari background images
|
border-box padding-box
content-box
|
background-size
|
Menentukan ukuran dari background images
|
panjang persentase cover
contain
|
Contoh implementasi background-size
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
Contoh output pada implementasi background-origin
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()
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 */
}
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 */
ransform: 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
|
Deskripsi
|
matrix(n,n,n,n,n,n)
|
Mendefinisikansebuah transformasi 2D, menggunakan matrix dengan 6 nilai
|
translate(x,y)
|
Mendefinisikansebuah transformasi 2D, memindahkan elemen sejauh sumbu-X
dan sumbu-Y
|
translateX(n)
|
Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-X
|
translateY(n)
|
Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-Y
|
scale(x,y)
|
Mendefinisikansebuah transformasi 2D, Merubah lebar dan panjang elemen
|
scaleX(n)
|
Mendefinisikansebuah transformasi 2D, Merubah lebar elemen
|
scaleY(n)
|
Mendefinisikansebuah transformasi 2D, Merubah panjang elemen
|
rotate(angle)
|
Mendefinisikansebuahrotasi 2D, yang derajatnya ditetapkan pada
parameternya
|
skew(x-angle,y-
angle)
|
Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X
dan sumbu-Y
|
skewX(angle)
|
Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X
|
skewY(angle)
|
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;
}
Properti Text Yang Baru
Properti
|
Deskripsi
|
hanging-punctuation
|
Menetapkan apakah sebuah karakter tanda baca boleh diletakkan
diluar kotak.
|
punctuation-trim
|
Memungkinkan apakah karakter tanda baca akan dipotong
|
text-align-last
|
Mendeskripiskan baris terakhir dari sebuah area atau baris kanan sebelum memaksa untuk di potong ketika tulisan rata tengah
"justify"
|
text-emphasis
|
Memberikan tanda empasis, dan warna bagian depan dari tanda
empasis untuk elemen text
|
text-justify
|
Menetapkan metode justification digunakan ketika text rata tengah
"justify"
|
text-outline
|
Menetapkan garis luar text “outline”
|
text-overflow
|
Menetapkan apa yang akan terjadi ketika text ditimpa(overflows)
elemen
|
text-shadow
|
Menambahkan bayangan ke text
|
text-wrap
|
Menetapkan pemotongan text untuk text yang panjang agar tidak
keluar batas atau kotak
|
word-wrap
|
Melakukan pemotongan kalimat yang panjang dan memindahnya
baris yang baru
|
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
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.
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>.
Sehingga, penampakan kode pada index.html adalah sebagai berikut
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
SEKIAN TUTORIALNYA .. TERIMAKASIH
