Baiklah kali ini saya akan berbagi contoh tag-tag HTML5, langsung mulai saja.
ELEMEN
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Elemen</title>
</head>
<body>
<i>Semangat Wisuda 2019
</i>
</body>
</html>
|
Output
:
ATRIBUT
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<a
href="https://tukangcoding0101.blogspot.com/">Contoh
Atribut</a>
</body>
</html>
|
Output
:
HEADING
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>H A L L
O</h1>
<h2>H A L L
O</h2>
<h3>H A L L
O</h3>
<h4>H A L L
O</h4>
<h5>H A L L
O</h5>
<h6>H A L L
O</h6>
</body>
</html>
|
Output
:
PARAGRAPH
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>paragraf</title>
</head>
<body>
<h1>I N F O R M A T I K
A</h1>
<p>
"Program studi Teknik Informatika mempelajari dan menerapkan
prinsip-prinsip ilmu komputer dan analisa matematis untuk desain,
pengembangan, pengujian, dan evaluasi perangkat lunak, sistem operasi dan
kerja komputer. Pada prodi ini akan diajarkan mulai dari menghasilkan ide
kreatif, kemudian merealisasikan ide tersebut, memecah fungsi-fungsi, dan
menciptakan struktur instruksi yang sangat detil dalam bahasa pemrograman
untuk mengajarkan komputer apa saja yang harus dilakukan. Mahasiswa Ilmu
Komputer harus menjadi ahli dalam sistem operasi dan aplikasi untuk
memastikan bahwa dasar sistem operasi bekerja dengan baik" </p>
</body>
</html>
|
Output :
HTML STYLE
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Style</title>
<style
type="text/css">
p
{
font-family: comic
sans ms;
background: yellow;
}
</style>
</head>
<body>
<h1>I N F O R M A T I K
A</h1>
<p>"Program
studi Teknik Informatika mempelajari dan menerapkan prinsip-prinsip ilmu
komputer dan analisa matematis untuk desain, pengembangan, pengujian, dan
evaluasi perangkat lunak, sistem operasi dan kerja komputer. Pada prodi ini
akan diajarkan mulai dari menghasilkan ide kreatif, kemudian merealisasikan
ide tersebut, memecah fungsi-fungsi, dan menciptakan struktur instruksi yang
sangat detil dalam bahasa pemrograman untuk mengajarkan komputer apa saja
yang harus dilakukan. Mahasiswa Ilmu Komputer harus menjadi ahli dalam sistem
operasi dan aplikasi untuk memastikan bahwa dasar sistem operasi bekerja
dengan baik"</p>
</body>
</html>
|
Output:
HTML FORMATING
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Formatting</title>
</head>
<body>
<p>
aku sedang mempelajari format-format teks
<br>
contohnya
itu:</p>
<p>Teks
Normal <br>
<tt>Desain Web
<br></tt>
<b>Desain
Web<br></b>
<i>Desain Web
<br></i>
<u>Desain
Web<br></u>
<big>Desain Web
<br></big>
<small>Desain Web
<br></small>
</p>
</body>
</html>
|
Output :
COMMENTS
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title>comments</title>
</head>
<body>
<!--
Kode ini membuat sebuah paragraf-->
<p>ini
tugas desain web kelompok </p>
</body>
</html>
|
Output
:
COLORS
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Collor</title>
</head>
<body>
<font
color="blue">H E L L O W A N N A B L E S</font>
</body>
</html>
|
Output
:
LINKS
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Links</title>
</head>
<body>
<head>
<a
href="https://tukangcoding0101.blogspot.com/">Klik
Disini</a>
</head>
</body>
</html>
|
Output :
Pilih ‘Klik Disini’ lalu akan mucul ke halaman yang dituju/halaman
baru.
IMAGES
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Image</title>
</head>
<body>
<h1>W A N N A O N
E</h1>
<img
src="wannaone.jpg" alt="wannaone" height="550"
width="800">
</body>
</html>
|
Output
:
TABEL
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
</head>
<body>
<h1>Tag H T M L
tabel</h1>
<table
border="3">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td>Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom
1</td>
<td> Baris 3, Kolom
2</td>
<td> Baris 3, Kolom
3</td>
</tr>
<tr>
<td> Baris 4, Kolom
1</td>
<td> Baris 4, Kolom
2</td>
<td> Baris 4, Kolom
3</td>
</tr>
</table>
</body>
</html>
|
Output
:
UNORDERED LIST
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Unordered
List</title>
</head>
<body>
<h3>Daftar Nama Kelompok - Desain
Web</h3>
<ol>
<li>Agus Susanto (5150411015) <br></li>
<li>Vivi Aryanti (5150411031) <br></li>
<li>Fatimah (5150411051) <br></li>
<li>Ana Alia Ulfa (5150411064) <br></li>
</ol>
</body>
</html>
|
Output
:
DENIFITION LIST
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Definition
List</title>
</head>
<body>
<dl>
<dt><h2>Komputer</h2></dt>
<dd>Komputer adalah alat yang
dipakai untuk mengolah data menurut prosedur yang telah dirumuskan. Kata
computer pada awalnya dipergunakan untuk menggambarkan orang yang
perkerjaannya melakukan perhitungan aritmetika, dengan atau tanpa alat bantu,
tetapi arti kata ini kemudian dipindahkan kepada mesin itu sendiri</dd>
<dt><h2>Komputer
Pribadi</h2></dt>
<dd> komputer pribadi (bahasa
Inggris: Personal Computer atau disingkat PC) mempunyai beberapa arti:
Istilah umum yang merujuk pada komputer yang dapat digunakan dan diperoleh
orang dengan mudah. Istilah umum yang merujuk kepada mikrokomputer yang
sesuai dengan spesifikasi IBM.</dd>
</dl>
</body>
</html>
|
Output
:
NESTED LIST
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h3>Macam
- Macam Hewan</h3>
<ol>
<li>Berdasarkan Cara
Berkembanbiak
<ul><li>Hewan Ovipar
(Bertelur)</li>
<li>Hewan Vivipar
(Melahirkan)</li>
<li>Hewan Ovovivivar (Bertelur,
Beranak, Melahirkan)</li>
</ul>
</li>
<li>Berdasarkan Jenis
Makanan
<ul><li>Herbivora</li>
<li>Karnivora</li>
<li>Omnivora</li>
</ul>
</ol>
</body>
</html>
|
Output
:
iFRAME
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>iFrame</title>
</head>
<body>
<iframe
src="https://tukangcoding0101.blogspot.com/ height="550"
width=1000""></iframe>
</body>
</html>
|
Output
:
JAVASCRIPT
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= "Hello Kelas Desain Web!";
</script>
</body>
</html>
|
Output
:
FILE PATH
Source
code :
|
<!DOCTYPE html>
<html>
<head>
<title>File
Path</title>
</head>
<body>
<img
src="wannaone.jpg" alt="wannaone"
style="width:300px">
</body>
</body>
</html>
|
Output
:
HEAD
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>Selamat Datang di
Kelas Desain Web</title>
</head>
<body>
H
a l l o . .
</body>
</html>
|
Output
:
LAYOUT
Source
code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#boxmodel {
background: #CDE;
border: 25px solid #ABC;
height: 100px;
margin: 25px;
padding: 25px;
width: 300px;
}
</style>
</head>
<body>
<div>Desain Web Layout</div>
<div id="boxmodel">
</div>
<div>Desain Web Layout</div>
</body>
</html>
|
Output :
RESPONSIVE
Source code mengatur area tampilan:
|
<!DOCTYPE
html>
<html>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<body>
<h2>Mengatur
Area Tampilan</h2>
<p>Contoh
ini tidak benar-benar melakukan apa pun, selain menunjukkan kepada Anda cara
menambahkan elemen meta viewport.</p>
</body>
</html>
|
Output :
Source code mengatur gambar :
|
<!DOCTYPE
html>
<html>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<body>
<h2>Gambar
Responsif</h2>
<p>Ketika
properti lebar CSS diatur dalam nilai persentase, gambar akan naik dan turun
saat mengubah ukuran jendela browser.
Ubah ukuran
jendela browser untuk melihat efeknya.</p>
<img
src="bungamatahari.jpg" style="width:100%;">
</body>
</html>
|
Output :
COMPUTERCODE
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>Elemen
kode</h2>
<p>Contoh:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</body>
</html>
|
Output :
ENTITIES
Tidak ada contoh
SYMBOL
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<p>Tampilan
€</p>
<p>Tampilan
€</p>
<p>Tampilan
€</p>
</body>
</html>
|
Output :
CHARSET
Tidak ada contoh
Character
Set ASCII
Tidak ada contoh
Character
Set Latin-1 atau ISO/IEC 8859-1
Tidak ada contoh
Character
Set UTF-16 dan UCS-2
Tidak ada contoh
Character
Set UTF-32 dan UCS-4
Tidak ada contoh
Character
Set dan Character Encoding UTF-8
Tidak ada contoh
URL
Encoding
Tidak
ada contoh
Form
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>HTML
Form</h2>
<form action="/action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Kuku">
<br>
Last name:<br>
<input type="text"
name="lastname" value="Kaka">
<br><br>
<input type="submit"
value="Submit">
</form>
<p>Jika
Anda mengklik tombol "Kirim", data formulir akan dikirim ke halaman
bernama "/action_page.php".</p>
</body>
</html>
|
Output :
Form
Elemen
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>The
input Element</h2>
<form
action="/action_page.php">
Enter your name:
<input name="firstname"
type="text">
<br><br>
<input type="submit">
</form>
</body>
</html>
|
Output :
Input
Type
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>Teks</h2>
<p>Jenis
inputan = "teks" mendefinisikan bidang input teks satu
baris:</p>
<form
action="/action_page.php">
First
name:<br>
<input
type="text" name="firstname">
<br>
Last
name:<br>
<input
type="text" name="lastname">
<br><br>
<input
type="submit">
</form>
</body>
</html>
|
Output :
Input
Atribut
Tidak ada contoh
Atribut
Nilai
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>Nilai
Atribut </h2>
<p>Atribut
nilai menentukan nilai awal untuk bidang input:</p>
<form
action="">
First
name:<br>
<input
type="text" name="firstname" value="John">
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
</body>
</html>
|
Output :
Atribut
Read-Only
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>Atribut
yang hanya bisa baca</h2>
<p>Atribut
readonly menentukan bahwa field input hanya bisa dibaca (tidak dapat
diubah):</p>
<form
action="">
First
name:<br>
<input
type="text" name="firstname" value ="John"
readonly>
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
</body>
</html>
|
Output :
Atribut
Disable
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>Atribut
disabled</h2>
<p>Atribut
disable menetapkan bahwa field input dinonaktifkan:</p>
<form
action="">
First
name:<br>
<input
type="text" name="firstname" value ="John"
disabled>
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
</body>
</html>
|
Output :
Atribut
Ukuran
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>Atribut
ukuran</h2>
<p>Atribut
ukuran menentukan ukuran (dalam karakter) dari kolom input:</p>
<form
action="">
First
name:<br>
<input
type="text" name="firstname" value="John"
size="40">
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
</body>
</html>
|
Output :
Atribut
Max-Length
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<h2>Atribut
maxlength</h2>
<p>Atribut
maxlength menentukan panjang maksimum yang diizinkan untuk bidang
input:</p>
<form
action="">
First
name:<br>
<input
type="text" name="firstname" maxlength="10">
<br>
Last
name:<br>
<input
type="text" name="lastname">
</form>
</body>
</html>
|
Output :
Elemen
<article>
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title>article</title>
</head>
<body>
<article>
<h2>Mengenal
Web Standard</h2>
<p>
Apa
itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan
lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki
standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua
<em>device</em> (smartphone, tablet, desktop dan lain sebagainya).
</p>
</article>
</body>
</html>
|
Output :
Elemen
<aside>
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title>aside</title>
</head>
<body>
<aside>
<h3>Istilah
Kata:</h3>
<dl>
<dt>W3C</dt>
<dd>World
Wide Web Consortium. Organisasi dunia yang mengelola dan membakukan web
standard.</dd>
</dl>
<dl>
<dt>Device</dt>
<dd>Alat.
Alat yang dimaksud adalah semua teknologi yang digunakan untuk mengakses
internet/web.</dd>
</dl>
</aside>
</body>
</html>
|
Output :
Elemen
<bdi>
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p
dir="ltr">Aku Cinta Kamu, Bahasa inggrisnya adalah <bdi>I
LOVE YOU</bdi> </p>
</body>
</html>
|
Output
:
Elemen <detail>
Source
code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<details>
<summary>Judul
Informasi (Klik Aku)</summary>
<p>Keterangan
dari informasi secara lengkap dapat ditulis disini.</p>
</details>
</body>
</html>
|
Output
:
Elemen <dialog>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML dialog tag</title>
</head>
<body>
<p>Silahkan, klik tombol dibawah ini untuk menampilkan dialog
box.</p>
<!-- contoh dialog box dengan konten form didalamnya -->
<dialog id="dialog2">
<form method="dialog">
<label>
Pilih Jasa Kurir:
<input name="ekspedisi2" list="kurir2" />
</label>
<datalist id="kurir2">
<label>
Atau Pilih dari daftar:
<select name="ekspedisi2">
<option value=""></option>
<option>POS Indonesia</option>
<option>JNE</option>
<option>TIKI</option>
</select>
</label>
</datalist>
<menu>
<button id="cancel"
type="reset">Batal</button>
<button type="submit">Oke</button>
</menu>
</form>
</dialog>
<menu>
<button id="showDialog">Tampilkan
Dialog</button>
</menu>
<script>
(function() {
var bukaDialog = document.getElementById('showDialog');
var tutupDialog = document.getElementById('cancel');
// buka atau tampilkan dialog box
bukaDialog.addEventListener('click', function() {
document.getElementById('dialog2').showModal();
});
// tutup dialog box
tutupDialog.addEventListener('click', function() {
document.getElementById('dialog2').close();
});
})();
</script>
</body>
</html>
|
Output
:
Elemen <figcaption>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML figcaption tag</title>
<style>
</style>
</head>
<body>
<figure>
<img src="img/1.JPG" alt="Parkiran Motor"
width="400" height="300">
<figcaption>Gambar 1 - Area parkir motor PT. Indah Kiat
Serang.</figcaption>
</figure>
</body>
</html>
|
Output
:
Elemen <figure>
Source
code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Pada
<a href="#kode1">Kode 1</a> Kita menggunakan CSS
<code>color</code> property untuk mewarnai tulisan.</p>
<figure
id="kode1">
<figcaption>Kode
1. Mewarnai tulisan pada sebuah teks paragraf menjadi hijau.</figcaption>
<pre><code>p
{
color:
green;
}</code></pre>
</figure>
<p>Tulisan
berwarna hijau hanya berlaku pada element <code>p</code>
(paragraf) saja.</p>
</body>
</html>
|
Output
:
Elemen <footer>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML footer tag</title>
<style>
ul
{text-align:center}
ul
li {display:inline;}
</style>
</head>
<body>
<article>
<h1>Apa itu Pisces?</h1>
<p>Pisces adalah habitat hewan yang hidup di air dengan bernafas
menggunakan insang. Contohnya, ikan.</p>
<footer>
<address>
Penulis: <a
href="mailto:contohemail@example.com?Subject=Hai%20Sobat">dul</a>
<br/>
Website: http://www.apacara.com
</address>
</footer>
</article>
<footer>
<ul>
<li><a
href="contact.html">Kontak</a></li>
<li><a
href="about.html">Mengenai</a></li>
<li><a
href="copyright.html">Copyright</a></li>
<li><a href="privacy.html">Privacy
Policy</a></li>
<li><a
href="sitemap.xml">Sitemap</a></li>
</ul>
</footer>
</body>
</html>
|
Output
:
Elemen <header>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML header tag</title>
</head>
<body>
<!-- header pertama -->
<header>
<h1>apaCara Blog</h1>
<nav>
<ul>
<li>
<a href="#">Artikel Terbaru</a>
</li>
<li>
<a href="#">Artikel Populer</a>
</li>
<li>
<a href="#">Hubungi Kami</a>
</li>
</ul>
</nav>
</header>
<article>
<!-- header kedua -->
<header>
<h2>Mengenal Web Standard</h2>
<p>Ditulis oleh: dul,
<time datetime="2015-03-07T13:00">07 Maret 2015, pkl.
13:00</time>
</p>
</header>
<p>Apa itu Web Standard? Web Standard adalah teknologi yang
dibangun oleh
W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web
agar memiliki standar yang dapat dinikmati oleh semua kalangan dan
dapat
diakses di semua
<em>device</em>(smartphone, tablet, desktop dan lain
sebagainya).</p>
</article>
</body>
</html>
|
Output
:
Elemen <main>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML main tag</title>
<style></style>
</head>
<body>
<main>
<h1>Mengenal Hewan Bertulang Belakang (Vertebrata)</h1>
<p>Vertebrata adalah hewan yang yang memiliki ciri bertulang
belakang.</p>
<article>
<h2>Pisces</h2>
<p>Pisces adalah habitat hewan yang hidup di air dengan bernafas
menggunakan insang. Contohnya, ikan.</p>
</article>
<article>
<h2>Amphibia</h2>
<p>Amphibia adalah golongan hewan yang dapat bertahan hidup di
dua alam, yaitu darat dan air. Contohnya, katak.</p>
</article>
</main>
</body>
</html>
|
Output
:
Elemen <mark>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML mark tag</title>
<style></style>
</head>
<body>
<h3>Contoh 1</h3>
Saya
tidak tahu, rumah pedagang <mark>tahu</mark>
<hr />
<h3>Contoh 2</h3>
<p>Anda salah tulis pada kata <em>yelow</em>,
seharusnya <em>yellow</em>. Seperti ini:</p>
<pre><code>footer {
background: <mark>yellow</mark>;
}</code></pre>
</body>
</html>
|
Output
:
Elemen <meter>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML meter tag</title>
<style>
</style>
</head>
<body>
<p>Contoh nilai 4 dari 10</p>
<meter value="4" min="0"
max="10">4 dari 10</meter><br>
<br>
<p>Contoh 50%</p>
<meter value="0.5">50%</meter>
</body>
</html>
|
Output
:
Elemen <nav>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML nav tag</title>
<style>
</style>
</head>
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>apacara.com</h1>
<p><a href="#">Blog</a> -
<a href="#">Chat</a> -
<a href="#">Forums</a></p>
<p>Update Terakhir: <span
itemprop="dateModified">2017-10-05</span></p>
<nav>
<h1>Menu Navigasi</h1>
<ul>
<li><a href="/">Index Seluruh
Article</a></li>
<li><a href="#">Referensi Belajar
HTML</a></li>
<li><a href="#">Referensi Belajar
CSS</a></li>
</ul>
</nav>
</body>
</html>
|
Output
:
Elemen <progress>
Source
code :
|
<html>
<head>
<meta
charset="utf-8" />
<title>Demo
HTML progress tag</title>
<style>
</style>
</head>
<body>
<progress
value="22" max="100"></progress>
</body>
</html>
|
Output
:
Elemen <selection>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML select tag</title>
<style>
</style>
</head>
<body>
<form action="voting_kurir.php"
method="get">
<p>Jasa kirim/Kurir apa yang Anda gunakan?</p>
<label>Kurir:
<select>
<option value="pos">POS Indonesia</option>
<option value="jne">JNE</option>
<option value="tiki">TIKI</option>
<option value="wahana">Wahana</option>
</select>
</label>
</form>
</body>
</html>
|
Output
:
Elemen <time>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML time tag</title>
<style>
</style>
</head>
<body>
<h3>Example 1</h3>
<p> Saya mulai bekerja pada
<time>2012-06-01</time>
</p>
<hr />
<h3>Example 2</h3>
<p>
Saya
bekerja pada pukul <time>08:00</time> dan pulang pukul
<time>17:00</time>
</p>
<hr />
<h3>Example 3</h3>
<article itemscope
itemtype="http://schema.org/Article">
<h1 itemprop="headline">Cara
Menyisipkan Tanggal di dalam HTML</h1>
<footer>Ditulis Pada:
<time itemprop="datePublished"
datetime="2015-08-17">Senin, 17 Agustus 2015</time>.
</footer>
<p
itemprop="description">Untuk menyisipkan tanggal dan waktu di
dalam halaman HTML gunakan element <time>.</p>
</article>
</body>
</html>
|
Output
:
Elemen <wbr>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML wbr tag by:apacara.com</title>
<style></style>
</head>
<body>
<p>
Meskipun Budi seorang anak pejabat, dia harus
mem<wbr>pertanggung<wbr>jawabkan perbuatannya.
</p>
</body>
</html>
|
Output
:
Elemen <track>
Source
code :
|
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML track tag
by:apacara.com</title>
<style>
body {
font-family: verdana, sans-serif;
font-size: 14px;
margin:2em auto;
background: #444;
color:white;
text-align:center;
}
p {margin-top:3em;}
video {
-webkit-box-reflect: below 3px
-webkit-linear-gradient(top, transparent, transparent 80%,
rgba(255,255,255,0.2));
}
::cue {
font-family: verdana, sans-serif;
font-size: 1.1em;
background: transparent;
color: white;
text-shadow: 0 0 3px #000;
}
</style>
</head>
<body>
<video width="320"
height="240" controls>
<source src='/media/video/halwa.mp4'
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src='/media/video/halwa.ogv'
type='video/ogg; codecs="theora, vorbis"'>
<source
src="/media/video/halwa.webm" type='video/webm; codecs="vp8,
vorbis"'>
<track label="English"
kind="subtitles" srclang="en"
src="/media/video/subtitles-en.vtt">
<track
label="Indonesian" kind="subtitles"
srclang="id"
src="/media/video/subtitles-id.vtt" default>
Browser Anda tidak mendukung HTML
video tag.
</video>
<p>Contoh yang ini menggunakan
dua <track> element dengan dua subtitle, Bahasa Indonesia dan
Bahasa Inggris dengan sedikit tambahan CSS styles. </p>
<p><strong>Perhatian</strong>: Jika subtitle tidak
muncul, kemungkinan browser tidak support track element.</p>
</body>
</html>
|
Output
:
Graphic dan Canvas
Tentang Canvas
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<canvas
id="myCanvas" width="700" height="500" style="border:5px
solid #E9967A;">
</canvas>
</body>
</html>
|
Output
:
Kanvas Gambar
Source
code :
|
<!DOCTYPE
html>
<html>
<head>
<title>kanvasgambar</title>
</head>
<body>
<canvas
id="myCanvas" width="200" height="100"
style="border:5px
solid #E9967A;">
Your
browser does not support the canvas element.
</canvas>
<script>
var
canvas = document.getElementById("myCanvas");
var
ctx = canvas.getContext("2d");
ctx.fillStyle
= "#008B8B";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
|
Output
:
Draw
Line
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<canvas
id="myCanvas" width="200" height="100"
style="border:1px
solid #d3d3d3;">
Your
browser does not support the canvas element.
</canvas>
<script>
var
canvas = document.getElementById("myCanvas");
var
ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,200);
ctx.stroke();
</script>
</body>
</html>
|
Output :
Draw
a Circle
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<canvas
id="myCanvas" width="200" height="100"
style="border:1px
solid #d3d3d3;">
Your
browser does not support the canvas element.
</canvas>
<script>
var
canvas = document.getElementById("myCanvas");
var
ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
|
Output :
Canvas
Gradient
Tidak ada contoh
Create
Linear Gradient
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<canvas
id="myCanvas" width="200" height="100"
style="border:1px
solid #008B8B;">
Your
browser does not support the HTML5 canvas tag.</canvas>
<script>
var
c = document.getElementById("myCanvas");
var
ctx = c.getContext("2d");
//
Create gradient
var
grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
//
Fill with gradient
ctx.fillStyle
= grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
|
Output :
Create
Radial Gradient
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<canvas
id="myCanvas" width="200" height="100"
style="border:1px
solid #d3d3d3;">
Your
browser does not support the HTML5 canvas tag.</canvas>
<script>
var
c = document.getElementById("myCanvas");
var
ctx = c.getContext("2d");
//
Create gradient
var
grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
//
Fill with gradient
ctx.fillStyle
= grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
|
Output :
Canvas
Text
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<canvas
id="myCanvas" width="300" height="100"
style="border:1px
solid #FFD700;">
Your
browser does not support the canvas element.
</canvas>
<script>
var
canvas = document.getElementById("myCanvas");
var
ctx = canvas.getContext("2d");
ctx.font
= "30px Arial";
ctx.strokeText("D
E S A I N W E B",10,50);
</script>
</body>
</html>
|
Output :
Canvas
Images
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<p>Image
to use:</p>
<img
id="wannaone" width="300" height="220"
src="wannaone.jpg"
alt="W A N N A O N E">
<p>Canvas:</p>
<canvas
id="myCanvas" width="900" height="300"
style="border:1px
solid #FFD700;">
Your
browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload
= function() {
var canvas =
document.getElementById("myCanvas");
var ctx =
canvas.getContext("2d");
var img =
document.getElementById("wannaone");
ctx.drawImage(img, 10, 10);
};
</script>
</body>
</html>
|
Output :
SVG
Membuat
Gambar SVG
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1
align="left"> Membuat Gambar SVG </h1>
<svg width="300" height="300">
<circle
cx="100" cy="100" r="80" stroke="red"
stroke-width="4" fill="yellow"/>
</svg>
</body>
</html>
|
Output :
Contoh
SVG Rectangle
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="left"> Contoh SVG Rectangle
</h1>
<svg
width="400" height="200">
<rect
width="350" height="100"
style="fill:rgb(48, 209, 209);
stroke-width:5;
stroke:rgb(0,0,0)"
/>
</svg>
</svg>
</body>
</html>
|
Output :
Circle
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
Circle </h1>
<h2
align="center"><svg height="300"
width="300">
<circle cx="150"
cy="150" r="75" stroke="blue"
stroke-width="8" fill="gold" />
</svg></h2>>
</body>
</html>
|
Output :
Ellipse
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="left">
Ellipse </h1>
<svg height="150"
width="300">
<ellipse
cx="150" cy="80" rx="100" ry="50"
style="fill:hotpink;stroke:indigo;stroke-width:6"
/>
</svg>
</svg>
</body>
</html>
|
Output :
Line
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1
align="center"> L I N E </h1>
<h2
align="center"><svg height="600"
width="500">
<line x1="100" y1="150"
x2="400" y2="150"
style="stroke:rgb(0, 0, 139);stroke-width:3" />
</svg> </h2>>
</body>
</html>
|
Output :
Polygon
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
Poligon </h1>
<svg height="250"
width="500">
<polygon points="200,10 250,150 180,250"
style="fill:darksalmon;stroke:darkred;stroke-width:5" />
</svg>
</body>
</html>
|
Output :
Polyline
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1
align="center"> Polyline </h1>
<svg
height="200" width="500">
<polyline
points="30,30 40,25 60,40 80,120 120,140 400,180 300,110 500,160"
style="fill:none;stroke:black;stroke-width:3"
/>
</svg>
</body>
</html>
|
Output :
Path
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center"> P A T H </h1>
<svg
height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300"
stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300"
stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green"
stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0"
stroke="blue"
stroke-width="5" fill="none" />
<!-- Mark relevant points -->
<g stroke="black" stroke-width="3"
fill="black">
<circle
id="pointA" cx="100" cy="350" r="3"
/>
<circle
id="pointB" cx="250" cy="50" r="3"
/>
<circle
id="pointC" cx="400" cy="350" r="3"
/> </g>
<!-- Label the points -->
<g
font-size="30" font-family="sans-serif"
fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350"
dx="-30">A</text>
<text x="250" y="50"
dy="-10">B</text>
<text x="400" y="350"
dx="20">C</text>
</g>
</svg>
</body>
</html>
|
Output :
Text
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1
align=""> T E X T </h1>
<svg height="90" width="200">
<text x="10" y="20"
style="fill:blue;">Beberapa Baris:
<tspan
x="10" y="45" style="fill:crimson;">Baris
Pertama</tspan>
<tspan
x="10" y="70"
style="fill:darkgreen;">Baris Terakhir</tspan>
</text>
</svg>
</body>
</html>
|
Output :
Stroke
Stroke pukulan :
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align=""> Stroke
</h1>
<svg
height="80" width="300">
<g
fill="none">
<path stroke="black"
d="M5 20 l215 0" />
<path stroke="red"
d="M5 40 l215 0" />
<path stroke="navy"
d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
|
Output :
Stroke lebar-stroke :
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1
align=""> Stroke-width Property </h1>
<svg height="80" width="300">
<g fill="none" stroke="black">
<path stroke-width="2" d="M5 20 l215 0"
/>
<path stroke-width="4" d="M5 40 l215 0"
/>
<path stroke-width="6" d="M5 60 l215 0"
/>
</g>
</svg>
</body>
</html>
|
Output :
Strokeliencap:
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="">
Stroke-Linecap Property </h1>
<svg height="80"
width="300">
<g fill="none"
stroke="black" stroke-width="6">
<path
stroke-linecap="butt" d="M5 20 l215 0" />
<path
stroke-linecap="round" d="M5 40 l215 0" />
<path
stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
|
Output :
Stroke dasharray :
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="">
Stroke-dasharray Property </h1>
<svg height="80"
width="300">
<g fill="none"
stroke="black" stroke-width="4">
<path
stroke-dasharray="5,5" d="M5 20 l215 0" />
<path
stroke-dasharray="10,10" d="M5 40 l215 0" />
<path
stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>
|
Output :
Blur
Effect
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align=""> Blur
Effects </h1>
<svg height="110"
width="110">
<defs>
<filter
id="f1" x="0" y="0">
<feGaussianBlur
in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect
width="90" height="90" stroke="green"
stroke-width="3"
fill="orange"
filter="url(#f1)" />
</svg>
</body>
</html>
|
Output :
Drop
Shadow
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align=""> Drop
Shadows </h1>
<svg height="120"
width="120">
<defs>
<filter id="f1"
x="0" y="0" width="200%"
height="200%">
<feOffset result="offOut"
in="SourceGraphic" dx="20" dy="20" />
<feBlend
in="SourceGraphic" in2="offOut" mode="normal"
/>
</filter>
</defs>
<rect width="90"
height="90" stroke="yellow" stroke-width="3"
fill="red"
filter="url(#f1)" />
</svg>
</body>
</html>
|
Output :
Linear
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align=""> Linier </h1>
<svg height="150"
width="400">
<defs>
<linearGradient id="grad2"
x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%"
style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200"
cy="70" rx="85" ry="55"
fill="url(#grad2)" />
</svg>
</body>
</html>
|
Output :
Radial
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="">
Radial </h1>
<svg height="150"
width="500">
<defs>
<radialGradient id="grad1"
cx="50%" cy="50%" r="50%" fx="50%"
fy="50%">
<stop offset="0%"
style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%"
style="stop-color:rgb(138,43,226);stop-opacity:1" />
</radialGradient>
</defs>
<ellipse cx="200"
cy="70" rx="85" ry="55"
fill="url(#grad1)" />
</svg>
</body>
</html>
|
Output :
Google
Maps
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
<script
type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="map"
style="width: 600px; height: 300px;"></div>
<script
type="text/javascript">
// menentukan koordinat titik
tengah peta
var myLatlng = new
google.maps.LatLng(-7.747193,110.355398);
// pengaturan zoom dan titik
tengah peta
var myOptions = {
zoom: 13,
center: myLatlng
};
// menampilkan output pada element
var map = new
google.maps.Map(document.getElementById("map"), myOptions);
// menambahkan marker
var marker = new
google.maps.Marker({
position: myLatlng,
map: map,
title:"Universitas
Teknologi Yogyakarta"
});
</script>
</body>
</html>
|
Output :
Media
Tidak ada contoh
Video
Source code :
|
<!DOCTYPE
html>
<html>
<head>
<title></title>
</head>
<body>
<video controls>
<source
src="Wanna One - (I.P.U).mp4" type="video/mp4">
</video>
</body>
</html>
|
Output :
Audio
Source code :
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<audio controls>
<source src="ringtone.ogg"
type="audio/ogg">
<source
src="ringtone.mp3"type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
|
Output :
Plug-ins
Source code :
|
<!DOCTYPE
html>
<html>
<body>
<object
width="400" height="50"
data="bookmark.swf"></object>
</body>
</html>
|
Output :
Komentar
Posting Komentar