0

HTML/HTML5 Tutorial

HTML/HTML5 Tutorial


Dengan HTML kamu dapat membuat Web Site. Dalam tutorial ini kamu dapat mempelajari semua tentang HTML. Dan HTML sangat mudah dipelajari.

HTML Pengenalan

Apa sih HTML ?

HTML adalah bahasa markup untuk menggambarkan dokumen web (halaman web).
  • HTML singkatan H yper T ext M arkup L anguage
  • Sebuah bahasa markup adalah seperangkat tag markup
  • Dokumen HTML dijelaskan oleh tag HTML
  • Setiap tag HTML menjelaskan isi dokumen yang berbeda
<!--Struktur awal penulisan HTML--> 

<!DOCTYPE html>  <!--Jenis tag/kode HTML yang di pakai versi 5-->
<html>
<head>
<title></title>
</head>

<body>

<body>
</html>

Keterangan :

  • DOCTYPE deklarasi mendefinisikan jenis dokumen menjadi HTML
  • Teks antara <html> dan </html> menggambarkan sebuah dokumen HTML
  • Teks antara <head> dan </head> memberikan informasi tentang dokumen
  • Teks antara <title> dan </title> memberikan judul untuk dokumen
  • Teks antara <body> dan </body> menggambarkan isi halaman yang terlihat

HTML Tag

Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut:
< Tagname > konten < / tagname>
  • Tag HTML biasanya datang berpasangan seperti < p > dan < / p>
  • Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
  • Tag akhir ditulis seperti tag awal, tetapi dengan garis miring sebelum nama tag
 Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup.

HTML Editor

Dalam penulisan HTML dapat menggunakan beberapa editor , antara lain :
  • Adobe Dreamweaver
  • Microsoft Expression Web
  • CoffeeCup HTML Editor
  • TextEdit
  • Notepad++
  • PHP Storm
  • Sublime
  • dll
Namun, untuk awal belajar HTML sebaiknya editor teks yang digunakan seperti Notepad (PC) atau TextEdit (Mac). Kami percaya menggunakan editor teks sederhana adalah cara yang baik untuk belajar HTML. Ikuti 4 langkah berikut untuk membuat halaman web pertama Anda dengan Notepad.
  1. Langkah 1: Buka Notepad
    Untuk membuka Notepad di Windows 7 atau sebelumnya:
    Klik Start (kiri bawah pada layar Anda). Klik All Programs. Klik Accessories. Klik Notepad.
    Untuk membuka Notepad di Windows 8 atau yang lebih baru:
    Buka Start Screen (simbol jendela di bagian kiri bawah pada layar Anda). Ketik Notepad. 
    2. <!DOCTYPE html> 
<html>
<head>
<title></title>
</head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<body>
</html>

  2. Langkah 2: Menulis Beberapa HTML
    Menulis atau menyalin beberapa HTML ke Notepad.
  3. Langkah 3: Menyimpan Halaman HTML
    Cara menyimpan file HTML adalah klik File -> Save As lalu simpan dengan ekstensi htm atau html contohnya index.html
  4. Langkah 4 : Melihat Hasil file HTML di Browser
    Klik dua kali file HTML yang disimpan, dan hasilnya akan terlihat seperti ini:

HTML Basic

Semua dokumen HTML harus dimulai dengan deklarasi tipe: < ! DOCTYPE html >.
Dokumen HTML itu sendiri dimulai dengan < html > dan diakhiri dengan < / html >.
Bagian terlihat dari dokumen HTML adalah antara < body > dan < / body>.
<!DOCTYPE html> 
<html>
<head>
<title></title>
</head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<body>
</html>

HTML Elements

Elemen HTML ditulis dengan tag awal, dengan tag akhir, contoh:
< Tagname > konten < / tagname>
Elemen HTML adalah segalanya dari tag awal sampai tag akhir:
< p > My first HTML paragraf. < / p>


Tag Pembuka Elemen Tag Penutup
<h1> My First Heading </h1>
<p> My First Paragraf </p>
< br > 
 Beberapa elemen tidak membutuhkan tag penutup.

Keterangan :

< html > elemen mendefinisikan seluruh dokumen, dimana elemen ini berfungsi sebagai kerangka website atau bagian terluar website
< body > elemen mendefinisikan tubuh dokumen, seluruh tag atau kode HTML
< p > < / p > elemen p adalah paragraf
< h1 > < /h1 > elemen ini merupakan heading, biasanya digunakan untuk membuat judul website
  selalu tambahkan  tag penutup dan jangan lupa biasakan menulis tag HTML dengan huruf kecil semua.

HTML Attributes

Atribut memberikan informasi tambahan tentang elemen HTML.

Atribut HTML

  • Elemen HTML dapat memiliki atribut
  • Atribut memberikan informasi tambahan tentang elemen
  • Atribut selalu ditentukan dalam tag awal
  • Atribut datang dalam nama / nilai pasangan seperti: name = "value"

Atribut Lang

Atribut lang dapat dideklarasikan dengan tag < html > , lang juga berfungsi sebagai penentu bahasa pada mesin pencari. contoh :
<!DOCTYPE html> 
<html lang="en_US" >
<head>
<title></title>
</head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<body>
</html>

Atribut Title

<!DOCTYPE html> 
<html lang="en_US" >
<head>
<title></title>
</head>

<body>
<h1>About NOMOR1.com</h1>
<p title="About NOMOR1.com" >NOMOR1.com is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
<body>
</html>
	
  Bila Anda meletakkan mouse/kursor di atas elemen p / paragraf, judul akan ditampilkan sebagai tooltip.

Atribut Href

Atribut href digunakan pada sebuah link yaitu tag a
<a href="http://www.nomor1.com">This is a link</a>

Atribut Ukuran

Gambar HTML didefinisikan dengan tag < img > .
Nama file dari sumber (src), dan ukuran gambar (lebar dan tinggi) semua disediakan sebagai atribut:
<img src="nomor1.jpg" width="104" height="142">
Ukuran gambar ditentukan dalam pixel: width = "104" berarti 104 layar pixel.
Anda akan belajar lebih banyak tentang gambar dan < img > tag kemudian dalam tutorial ini.

Atribut Alt

Atribut alt menentukan sebuah teks alternatif yang akan digunakan, ketika sebuah elemen HTML tidak dapat ditampilkan.
<img src="nomor1.jpg" alt="nomor1.com" width="104" height="142">

HTML Heading

Heading HTML digunakan untuk judul terdiri dari level tag h1 sampai h6
<h1>Heading dengan level 1 </h1>

<h2>Heading dengan level 2 </h2>

<h3>Heading dengan level 3 </h3>

<h4>Heading dengan level 4 </h4>

<h5>Heading dengan level 5 </h5>

<h6>Heading dengan level 6 </h6>

INFO PENTING

Dalam penggunaan heading harus digunakan untuk judul yang membutuhkan ukuran besar dan tebal

HTML Paragraf

Untuk membuat paragraf di html tag nya adalah p . dalam paragraf dapat menambahkan atribut untuk perataan kanan, kiri, tengah atau rata kanan - kiri
<p>Ini adalah paragraf</p>
<p align="center">Ini adalah paragraf rata tengah </p>
<p align="left">Ini adalah paragraf rata kiri </p>
<p align="right">Ini adalah paragraf rata kanan </p>
<p align="justify">Ini adalah paragraf rata kanan - kiri </p>

HTML Style

Setiap elemen HTML memiliki gaya default (warna latar belakang putih, warna teks hitam, teks-ukuran 12px ...)
Mengubah gaya default elemen HTML, dapat dilakukan dengan atribut style.
Contoh ini akan mengubah warna latar belakang standar dari putih ke lightgrey:
<body  style="background-color:lightgrey" >
<p>Ini adalah paragraf</p>
<p>Ini adalah paragraf</p>
</body>

<!DOCTYPE html> 
<html>
<head>
<title></title>
</head>

<body>
<h1>Tentang style </h1>
<p style="color:red;font-family:verdana;font-size:30px;" >Paragraf dengan warna tulisan merah, karakter font verdana dan ukuran font 30 pixel</p>
<body>
</html>
HTML Style merupakan bagian dari CSS tipe inline , dalam atribut style = " properties : value "

HTML Format

Dalam format HTML terdiri beberapa elemen atau tag diantaranya untuk :
  • Teks tebal
  • Teks miring
  • Teks Ditekankan
  • Teks Ditandai
  • Teks kecil
  • Teks Dihapus
  • Teks dimasukkan
  • Subskrip : H2O
  • Superscripts : X2
<!DOCTYPE html> 
<html>
<head>
<title></title>
</head>

<body>

<b>Text tebal / bold </b>
<strong>Text tebal / bold </strong>
<i>Text miring / italic </i>
<em>Text miring </em>
<u>Text garis bawah / underline </u>
<ins>Text dimasukkan </ins>
<s>Text dihapus / striketrue </s> 
H<sub>2</sub>O 	
X<sup>2</sup>	
<mark>Text untuk memperjelas </mark>
<small>Text kecil </small>

<body>
</html>

HTML Kutipan

Di HTML kutipan terdapat beberapa tag yang digunakan, seperti :
  • <q> </q> : sebagai kutipan pendek
  • <blockquote> </blockquote> : digunakan untuk kutipan panjang
  • <abbr> </abbr> : untuk singkatan atau akronim
  • <dfn> </dfn> : untuk mendefinisikan istilah atau singkatan
  • <address> </address> : untuk penulisan informasi kontak
  • <cite> </cite> : mendefinisikan judul karya
  • <bdo> </bdo> : mendifiniskan bi-directional
Contoh :
<!DOCTYPE html> 
<html>
<head>
<title></title>
</head>

<body>

<q>Teks ini adalah contoh q </q>

<blockquote> Teks ini adalah contoh blockquote </blockquote>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

THE <dfn>WHO </dfn> World Health Organization was founded in 1948.

<address> 
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland <br>
USA
</address>

Teks ini adalah <cite> contoh cite </cite>

<bdo  dir="rtl" > Jika browser Anda mendukung bdo, teks ini akan ditulis dari kanan ke kiri: </bdo>

<body>
</html>

HTML Computercode

  • <code> Mendefinisikan teks kode komputer
  • <kbd> Mendefinisikan teks untuk keyboard
  • <samp> Mendefinisikan sampel kode komputer
  • <var> Mendefinisikan variabel
  • <pre> Mendefinisikan teks terformat
contoh : 
<!DOCTYPE html> 
<html>
<head>
<title></title>
</head>

<body>

<code> 	Mendefinisikan teks kode komputer	</code>
<kbd> 	Mendefinisikan teks untuk keyboard	<kbd>
<samp>	Mendefinisikan sampel kode komputer	<samp>
<var>	Mendefinisikan variabel			<var>
<pre>	Mendefinisikan teks terformat		<pre>

<body>
</html>

HTML Komentar

Anda dapat menambah komentar atau keterangan jika diperlukan, untuk informasi di sintaks html. HTML komentar ini tidak akan tampil di browser
<!-- Tuliskan komentar disini -->

HTML CSS

Pada pembahasan ini berisi css untuk tipe embedded , tandanya terdapat tag < style > di head, contoh :
<head>
<style>
body {background-color:lightgray}
h1   {color:blue}
p    {color:green}
</style>
</head>


<body>
<h1>Heading</h1>
<p>Paragraf</p>
</body>

HTML Link

Link HTML adalah hyperlink. Sebuah hyperlink merupakan elemen, teks, atau gambar yang Anda dapat mengklik, dan melompat ke dokumen lain.
<a href="http:google.com" target="_blank"> KLINK DISINI </a>
href sebagai tempat url dan target = blank , supaya saat diklik tulisan "KLIK DISINI" maka akan membuka tab/halaman baru dibrowser, selain target = _blank adapun yang lainnya yaitu
  • _self
  • _parent
  • _top

HTML Image

Tag untuk menampilkan sebuah gambar baik berupa jpg,png atau lainnya yaitu menggunakan < img > , tapi img saja belum cukup .. kita dapat menambahkan untuk ukuran tinggi serta lebarnya lalu alternate text sebagai keterangan jika gambar tidak bisa muncul
<img src="image.jpg" width="300" height="300" alt="teks alternate" >

HTML Tabel

Untuk tabel tagnya adalah <table> </table>
Dalam tabel terdiri dari baris =tr dan kolom=td, contoh:
<table border="1" style="width:100%">
<tr >
<td>Jill> </td>
<td>Smith </td>
<td>50 </td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson </td> 
<td>94 </td>
</tr>	
</table>

Hasil

Jill Smith 50
Eve Jackson 94

Tabel Heading

<table border="1" style="width:100%">
<tr >
<th>First Name> </th>
<th>Last Name </th>
<th>Point </th>
</tr>
<tr >
<td>Jill> </td>
<td>Smith </td>
<td>50 </td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson </td> 
<td>94 </td>
</tr>	
</table>

Hasil

First Name Last Name Point
Jill Smith 50
Eve Jackson 94

Table thead tbody

<table border="1" style="width:100%">
<thead>
<tr >
<th>First Name> </th>
<th>Last Name </th>
<th>Point </th>
</tr>
</thead>

<tbody>
<tr >
<td>Jill> </td>
<td>Smith </td>
<td>50 </td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson </td> 
<td>94 </td>
</tr>
</tbody>
</table>

Hasil

First Name Last Name Point
Jill Smith 50
Eve Jackson 94

Colspan

<table border="1" style="width:100%">
<thead>
<tr >
<th>First Name> </th>
<th>Last Name </th>
<th>Point </th>
</tr>
</thead>

<tbody>
<tr >
<td colspan="3">Hasil colspan, penggabungan 3 kolom menjadi 1 kolom </td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson </td> 
<td>94 </td>
</tr>
</tbody>
</table>

Hasil

First Name Last Name Point
Hasil colspan, penggabungan 3 kolom menjadi 1 kolom
Eve Jackson 94

Rowspan

<table border="1" style="width:100%">
<thead>
<tr >
<th>First Name> </th>
<th>Last Name </th>
<th>Point </th>
</tr>
</thead>

<tbody>
<tr >
<td rowspan="2"> Hasil dari rowspan , penggabungan 2 kolom menjadi 1 baris </td> 
<td>Smith </td> 
<td>50 </td>
</tr>
<tr>
<td>Jackson </td> 
<td>94 </td>
</tr>
</tbody>
</table>

Hasil

First Name Last Name Point
Hasil dari rowspan , penggabungan 2 kolom menjadi 1 baris Smith 50
Jackson 94

Caption

<table border="1" style="width:100%">
<caption>Tampilan caption disini</caption>
<thead>
<tr >
<th>First Name> </th>
<th>Last Name </th>
<th>Point </th>
</tr>
</thead>

<tbody>
<tr >
<td>Jill</td> 
<td>Smith </td> 
<td>50 </td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson </td> 
<td>94 </td>
</tr>
</tbody>
</table>

Hasil

Tampilan caption disini
First Name Last Name Point
Jill Smith 50
Eve Jackson 94

HTML List

Macam - macam list pada HTML terdiri dari 3 tag antara lain :
  1. Ordered List <ol></ol> : list dengan tipe huruf atau angka. tipe pada list ini antara lain : i,a,I,A,1
  2. Unordered List <ul></ul> : list dengan tipe simbol, antara lain disc, square, circle
  3. Delete List <ul></ul> : list tanpa simbol , huruf atau angka

Contoh ordered list type A

<ol type="A">
<li>list 1<li>
<li>list 2<li>
<li>list 3<li>
</ol>

Hasil

  1. list 1
  2. list 2
  3. list 3

Contoh unordered list type disc

<ul type="disc">
<li>list 1<li>
<li>list 2<li>
<li>list 3<li>
</ul>

Hasil

  • list 1
  • list 2
  • list 3

Contoh delete list

<dl>
<dd>list 1<dd>
<dd>list 2<dd>
<dd>list 3<dd>
</dl>

Hasil

list 1
list 2
list 3

HTML Block

London

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa
Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.

HTML Block Elemen dan Inline Elemen

Kebanyakan elemen HTML didefinisikan sebagai elemen-elemen tingkat blok atau elemen inline.
Elemen tingkat blok biasanya mulai (dan akhir) dengan baris baru, ketika ditampilkan di browser.
Contoh: < h1 >, < p > , < ul >, < table >
Elemen inline biasanya ditampilkan tanpa jeda baris.
Contoh: < b >, < td >, < a >, < img >

HTML < div > Elemen

HTML < div > elemen elemen tingkat blok yang dapat digunakan sebagai wadah untuk elemen HTML lainnya.
< div > elemen tidak memiliki arti khusus. Tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.
Karena merupakan elemen tingkat blok, browser akan menampilkan baris istirahat sebelum dan sesudah itu.
Ketika digunakan bersama-sama dengan CSS, < div > elemen dapat digunakan untuk gaya blok konten.
<div style="background-color:black; color:white; margin:20px; padding:20px;">
<h2>London</h2>
<p>London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa</p>
<p>Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.</p>
</div>

HTML < span > Elemen

HTML < span > elemen adalah elemen inline yang dapat digunakan sebagai wadah untuk teks.
< span > elemen tidak memiliki arti khusus. Tidak memiliki atribut yang diperlukan, tapi gaya dan kelas yang umum.
Tidak seperti < div >, yang diformat dengan jeda baris, yang < span > elemen tidak memiliki format otomatis.
Ketika digunakan bersama-sama dengan CSS, yang < span > elemen dapat digunakan untuk gaya bagian dari teks:
<h1>My <span style="color:red">Important</span>Heading</h1>

HTML Classes

Class merupakan salah satu selector CSS. Class juga disimbolkan dengan titik (.) , misalkan di css terdapat .box , maka di HTML dapat dipanggil class="box" .
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}	
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>

<p>London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa.</p>
<p>Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.</p>
</div> 

</body>
</html>

Hasil

London

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta jiwa.
Berdiri di Sungai Thames, London telah menjadi pemukiman utama bagi dua ribu tahun, sejarah akan kembali ke didirikan oleh orang Romawi, yang menamakannya Londinium.

HTML Layout


header Mendefinisikan sebuah header untuk dokumen atau bagian section
nav Mendefinisikan sebuah wadah untuk link navigasi
section Mendefinisikan sebuah bagian dalam sebuah dokumen
article Mendefinisikan sebuah artikel mandiri independen
aside Mendefinisikan konten selain dari konten ( seperti sidebar )
footer Mendefinisikan footer untuk dokumen atau bagian section
details Mendefinisikan rincian tambahan
summary Mendefinisikan judul untuk detail elemen
Untuk dapat mempraktekkan tag diatas dapat di pelajari pada Bab CSS

HTML Responsive

Responsive disini adalah tampilan website yang menyesuaikan dengan layar monitor, baik itu PC, Tablet maupun SmartPhone. Pada materi ini untuk dapat membuat website bersifat responsif , kita menggunakan framework css bernama Bootstrap.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<div class="container">

<div class="jumbotron">
<h1>NOMOR1 Demo</h1> 
<p>Resize this responsive page!</p>
</div>

<div class="row">
<div class="col-md-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-md-4">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="col-md-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world</p>
</div>
</div>

</div>
</body>
</html>

HTML Iframes

Iframe digunakan untuk menampilkan halaman web dalam halaman web.
Sintaks untuk menambahkan iframe adalah:
<iframe src=" URL "></iframe>
Src atribut menentukan URL (alamat web) dari halaman iframe.

Iframe - Mengatur Tinggi dan Lebar

Gunakan tinggi dan lebar atribut untuk menentukan ukuran.
Nilai atribut yang ditentukan dalam pixel secara default, tetapi mereka juga bisa dalam persen (seperti "80%").
<iframe src="kampushtmldemo.html" width="200" height="200"> </iframe>

Iframe - Hapus Border

The frameborder atribut menentukan apakah atau tidak untuk menampilkan border/batas di sekitar iframe.
Mengatur nilai atribut "0" untuk menghapus border/batas:
<iframe src="kampushtmldemo.html" frameborder="0"> </iframe>

Iframe - Link

<!DOCTYPE html>
<html>
<body>

<iframe width="100%" height="300px" src="kampushtmldemo.html" name="iframe_a" frameborder="0" > </iframe>
<p><a href="http://www.nomor1.com" target="iframe_a">NOMOR1.com</a></p>

<p>Klik link diatas, maka akan menampilkan website yang dituju dalam iframe</p>

</body>
</html>

NOMOR1.com
Klik link diatas, maka akan menampilkan website yang dituju dalam iframe

HTML Color Names

Nama Kode Tampilan
Alice Blue #F0F8FF
AntiqueWhite #FAEBD7
Aqua #00FFFF
Aquamarine #7FFFD4
Azure #F0FFFF
Beige #F5F5DC
Bisque #FFE4C4
Black #000000
BlanchedAlmond #FFEBCD
Blue #0000FF
Selengkapnya dapat Anda lihat di

HTML Color Values

Warna yang ditampilkan menggabungkan RED, GREEN, dan cahaya biru (RGB).

Nilai warna

Warna didefinisikan menggunakan heksadesimal (hex) notasi untuk Merah, Hijau, dan Biru (RGB).
Nilai terendah untuk setiap sumber cahaya adalah 0 (hex 00). Nilai tertinggi adalah 255 (hex FF).
Nilai Hex ditulis sebagai # diikuti oleh tiga atau enam karakter hex.
Notasi tiga digit (#rgb) secara otomatis dikonversi ke enam digit (#rrggbb):
<!DOCTYPE html>
<html>
<body>

<h2 style="background-color:#FFFF00">Color set by using HEX</h2>

<h2 style="background-color:rgb(255,255,0)">
Color set by using RGB
</h2>

<h2 style="background-color:yellow">
Color set by using Name
</h2>

</body>
</html>

Demo

Warna diatur menggunakan HEX

Warna diatur menggunakan RGB

Warna diatur menggunakan Name

Selengkapnya dapat dilihat lalu pilih choose format.

HTML Color Shades

Gray Shades HEX RGB
  #000000  rgb(0,0,0) 
  #080808  rgb(8,8,8) 
  #101010  rgb(16,16,16) 
  #181818  rgb(24,24,24) 
  #202020  rgb(32,32,32) 
  #282828  rgb(40,40,40) 
  #303030  rgb(48,48,48) 
  #383838  rgb(56,56,56) 
  #404040  rgb(64,64,64) 
  #484848  rgb(72,72,72) 
  #505050  rgb(80,80,80) 
  #585858  rgb(88,88,88) 
  #606060  rgb(96,96,96) 
  #686868  rgb(104,104,104) 
  #707070  rgb(112,112,112) 
  #787878  rgb(120,120,120) 
  #808080  rgb(128,128,128) 
  #888888  rgb(136,136,136) 
  #909090  rgb(144,144,144) 
  #989898  rgb(152,152,152) 
  #A0A0A0  rgb(160,160,160) 
  #A8A8A8  rgb(168,168,168) 
  #B0B0B0  rgb(176,176,176) 
  #B8B8B8  rgb(184,184,184) 
  #C0C0C0  rgb(192,192,192) 
  #C8C8C8  rgb(200,200,200) 
  #D0D0D0  rgb(208,208,208) 
  #D8D8D8  rgb(216,216,216) 
  #E0E0E0  rgb(224,224,224) 
  #E8E8E8  rgb(232,232,232) 
  #F0F0F0  rgb(240,240,240) 
  #F8F8F8  rgb(248,248,248) 
  #FFFFFF  rgb(255,255,255) 

16 Warna Berbeda

Kombinasi Merah, Hijau dan Biru nilai dari 0 sampai 255 memberikan total lebih dari 16 juta warna yang berbeda untuk bermain dengan (256 x 256 x 256).
Kebanyakan monitor modern mampu menampilkan setidaknya 16384 warna yang berbeda.
Jika Anda melihat tabel warna di bawah ini, Anda akan melihat hasil dari berbagai lampu merah dari 0 sampai 255, sementara menjaga lampu hijau dan biru pada nol.
Untuk melihat daftar lengkap warna campuran ketika lampu merah bervariasi dari 0 sampai 255, klik pada salah satu hex atau rgb nilai di bawah ini.
Red Light HEX RGB
  #000000  rgb(0,0,0) 
  #080000  rgb(8,0,0) 
  #100000  rgb(16,0,0) 
  #180000  rgb(24,0,0) 
  #200000  rgb(32,0,0) 
  #280000  rgb(40,0,0) 
  #300000  rgb(48,0,0) 
  #380000  rgb(56,0,0) 
  #400000  rgb(64,0,0) 
  #480000  rgb(72,0,0) 
  #500000  rgb(80,0,0) 
  #580000  rgb(88,0,0) 
  #600000  rgb(96,0,0) 
  #680000  rgb(104,0,0) 
  #700000  rgb(112,0,0) 
  #780000  rgb(120,0,0) 
  #800000  rgb(128,0,0) 
  #880000  rgb(136,0,0) 
  #900000  rgb(144,0,0) 
  #980000  rgb(152,0,0) 
  #A00000  rgb(160,0,0) 
  #A80000  rgb(168,0,0) 
  #B00000  rgb(176,0,0) 
  #B80000  rgb(184,0,0) 
  #C00000  rgb(192,0,0) 
  #C80000  rgb(200,0,0) 
  #D00000  rgb(208,0,0) 
  #D80000  rgb(216,0,0) 
  #E00000  rgb(224,0,0) 
  #E80000  rgb(232,0,0) 
  #F00000  rgb(240,0,0) 
  #F80000  rgb(248,0,0) 
  #FF0000  rgb(255,0,0) 

Di Zaman Batu

Di zaman batu, ketika komputer hanya didukung 256 warna yang berbeda, daftar 216 "Web Warna Aman" disarankan sebagai standar Web, pemesanan 40 warna sistem tetap.
216 palet warna cross-browser ini diciptakan untuk memastikan bahwa semua komputer akan menampilkan warna dengan benar:
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

HTML JavaScript

Javascripts membuat halaman HTML lebih dinamis dan interaktif.
Untuk menyisipkan javascript di HTML , dapat menambahkan tag < script > < /script > atau < noscript >< /noscript >
Lebih lengkapnya , akan dijelaskan pada Bab JavaScript

Script

< Script > tag digunakan untuk mendefinisikan script client-side, seperti JavaScript.
< Script > elemen baik berisi pernyataan scripting atau menunjuk ke sebuah file script eksternal melalui atribut src.
Penggunaan umum untuk JavaScript adalah manipulasi gambar, validasi form, dan perubahan dinamis konten.

Noscript

< Noscript > tag digunakan untuk memberikan konten alternatif untuk pengguna yang memiliki skrip dinonaktifkan pada browser mereka atau memiliki browser yang tidak mendukung client-side scripting.
< Noscript > elemen dapat berisi semua elemen yang dapat Anda temukan di dalam < body > elemen halaman HTML biasa.

HTML Head

< head > elemen merupakan wadah untuk meta data (data tentang data).
Meta data HTML adalah data tentang dokumen HTML. Metadata tidak ditampilkan.
Meta data biasanya menentukan judul dokumen, gaya, link, script, dan informasi meta lainnya.
Tag berikut menjelaskan meta data: < title >, < style >, < meta >, < link >, < script >, dan < base >.
Tag Deskripsi Sintaks
<head> Mendefinisikan informasi tentang dokumen < head >< /head>
<title> Mendefinisikan judul dokumen < title >Page Title< /title >
<base> Mendefinisikan sebuah alamat default atau target standar untuk semua link pada halaman < base href="http://www.google.com" target="_blank" >
<link> Mendefinisikan hubungan antara dokumen dan sumber daya eksternal < link rel="stylesheet" href="mystyle.css" >
<meta> Mendefinisikan metadata tentang dokumen HTML < meta http-equiv="refresh" content="30" > akan me-refresh setelah 30 detik

< meta name="author" content="Hege Refsnes" > memberikan nama author pada page/website

< meta charset="UTF-8" > charset utf-8 untuk HTML5

< meta name="description" content="tutorial HTML and CSS" >

< meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" >
<script> Mendefinisikan sebuah script sisi klien < script > function myFunction { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } < /script >
<style> Mendefinisikan informasi style untuk dokumen < style> body {background-color:yellow;} p {color:blue;} < /style>

HTML Entities

Karakter Reserved dalam HTML harus diganti dengan entitas karakter.
Karakter, tidak hadir pada keyboard Anda, bisa juga digantikan oleh entitas.

Entitas HTML

Beberapa karakter yang dimiliki dalam HTML.
Jika Anda menggunakan kurang dari (<) atau lebih besar dari (>) tanda-tanda dalam teks Anda, browser mungkin mencampur mereka dengan tag.
Entitas karakter yang digunakan untuk menampilkan karakter pendiam dalam HTML.
Sebuah entitas karakter terlihat seperti ini:
Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

HTML Symbols

Char Dec Hex Entity Name
∀87042200&forall;FOR ALL
∁87052201 COMPLEMENT
∂87062202&part;PARTIAL DIFFERENTIAL
∃87072203&exist;THERE EXISTS
∄87082204 THERE DOES NOT EXIST
∅87092205&empty;EMPTY SET
∅87102206 INCREMENT
∇87112207&nabla;NABLA
∈87122208&isin;ELEMENT OF
∉87132209&notin;NOT AN ELEMENT OF
∊8714220A SMALL ELEMENT OF
∋8715220B&ni;CONTAINS AS MEMBER
∌8716220C DOES NOT CONTAIN AS MEMBER
∍8717220D SMALL CONTAINS AS MEMBER
∎8718220E END OF PROOF
∏8719220F&prod;N-ARY PRODUCT
∐87202210 N-ARY COPRODUCT
∑87212211&sum;N-ARY SUMMATION
−87222212&minus;MINUS SIGN
∓87232213 MINUS-OR-PLUS SIGN
∔87242214 DOT PLUS
∕87252215 DIVISION SLASH
∖87262216 SET MINUS
∗87272217&lowast;ASTERISK OPERATOR
∘87282218 RING OPERATOR
∙87292219 BULLET OPERATOR
√8730221A&radic;SQUARE ROOT
∛8731221B CUBE ROOT
∜8732221C FOURTH ROOT
∝8733221D&prop;PROPORTIONAL TO
∞8734221E&infin;INFINITY
∟8735221F RIGHT ANGLE
∠87362220&ang;ANGLE
∡87372221 MEASURED ANGLE
∢87382222 SPHERICAL ANGLE
∣87392223 DIVIDES
∤87402224 DOES NOT DIVIDE
∥87412225 PARALLEL TO
∦87422226 NOT PARALLEL TO
∧87432227&and;LOGICAL AND
∨87442228&or;LOGICAL OR
∩87452229&cap;INTERSECTION
∪8746222A&cup;UNION
∫8747222B&int;INTEGRAL
∬8748222C DOUBLE INTEGRAL
∭8749222D TRIPLE INTEGRAL
∮8750222E CONTOUR INTEGRAL
∯8751222F SURFACE INTEGRAL
∰87522230 VOLUME INTEGRAL
∱87532231 CLOCKWISE INTEGRAL
∲87542232 CLOCKWISE CONTOUR INTEGRAL
∳87552233 ANTICLOCKWISE CONTOUR INTEGRAL
∴87562234&there4;THEREFORE
∵87572235 BECAUSE
∶87582236 RATIO
∷87592237 PROPORTION
∸87602238 DOT MINUS
∹87612239 EXCESS
∺8762223A GEOMETRIC PROPORTION
∻8763223B HOMOTHETIC
∼8764223C&sim;TILDE OPERATOR
∽8765223D REVERSED TILDE
∾8766223E INVERTED LAZY S
∿8767223F SINE WAVE
≀87682240 WREATH PRODUCT
≁87692241 NOT TILDE
≂87702242 MINUS TILDE
≃87712243 ASYMPTOTICALLY EQUAL TO
≄87722244 NOT ASYMPTOTICALLY EQUAL TO
≅87732245&cong;APPROXIMATELY EQUAL TO
≆87742246 APPROXIMATELY BUT NOT ACTUALLY EQUAL TO
≇87752247 NEITHER APPROXIMATELY NOR ACTUALLY EQUAL TO
≈87762248&asymp;ALMOST EQUAL TO
≉87772249 NOT ALMOST EQUAL TO
≊8778224A ALMOST EQUAL OR EQUAL TO
≋8779224B TRIPLE TILDE
≌8780224C ALL EQUAL TO
≍8781224D EQUIVALENT TO
≎8782224E GEOMETRICALLY EQUIVALENT TO
≏8783224F DIFFERENCE BETWEEN
≐87842250 APPROACHES THE LIMIT
≑87852251 GEOMETRICALLY EQUAL TO
≒87862252 APPROXIMATELY EQUAL TO OR THE IMAGE OF
≓87872253 IMAGE OF OR APPROXIMATELY EQUAL TO
≔87882254 COLON EQUALS
≕87892255 EQUALS COLON
≖87902256 RING IN EQUAL TO
≗87912257 RING EQUAL TO
≘87922258 CORRESPONDS TO
≙87932259 ESTIMATES
≚8794225A EQUIANGULAR TO
≛8795225B STAR EQUALS
≜8796225C DELTA EQUAL TO
≝8797225D EQUAL TO BY DEFINITION
≞8798225E MEASURED BY
≟8799225F QUESTIONED EQUAL TO
≠88002260&ne;NOT EQUAL TO
≡88012261&equiv;IDENTICAL TO
≢88022262 NOT IDENTICAL TO
≣88032263 STRICTLY EQUIVALENT TO
≤88042264&le;LESS-THAN OR EQUAL TO
≥88052265&ge;GREATER-THAN OR EQUAL TO
≦88062266 LESS-THAN OVER EQUAL TO
≧88072267 GREATER-THAN OVER EQUAL TO
≨88082268 LESS-THAN BUT NOT EQUAL TO
≩88092269 GREATER-THAN BUT NOT EQUAL TO
≪8810226A MUCH LESS-THAN
≫8811226B MUCH GREATER-THAN
≬8812226C BETWEEN
≭8813226D NOT EQUIVALENT TO
≮8814226E NOT LESS-THAN
≯8815226F NOT GREATER-THAN
≰88162270 NEITHER LESS-THAN NOR EQUAL TO
≱88172271 NEITHER GREATER-THAN NOR EQUAL TO
≲88182272 LESS-THAN OR EQUIVALENT TO
≳88192273 GREATER-THAN OR EQUIVALENT TO
≴88202274 NEITHER LESS-THAN NOR EQUIVALENT TO
≵88212275 NEITHER GREATER-THAN NOR EQUIVALENT TO
≶88222276 LESS-THAN OR GREATER-THAN
≷88232277 GREATER-THAN OR LESS-THAN
≸88242278 NEITHER LESS-THAN NOR GREATER-THAN
≹88252279 NEITHER GREATER-THAN NOR LESS-THAN
≺8826227A PRECEDES
≻8827227B SUCCEEDS
≼8828227C PRECEDES OR EQUAL TO
≽8829227D SUCCEEDS OR EQUAL TO
≾8830227E PRECEDES OR EQUIVALENT TO
≿8831227F SUCCEEDS OR EQUIVALENT TO
⊀88322280 DOES NOT PRECEDE
⊁88332281 DOES NOT SUCCEED
⊂88342282&sub;SUBSET OF
⊃88352283&sup;SUPERSET OF
⊄88362284&nsub;NOT A SUBSET OF
⊅88372285 NOT A SUPERSET OF
⊆88382286&sube;SUBSET OF OR EQUAL TO
⊇88392287&supe;SUPERSET OF OR EQUAL TO
⊈88402288 NEITHER A SUBSET OF NOR EQUAL TO
⊉88412289 NEITHER A SUPERSET OF NOR EQUAL TO
⊊8842228A SUBSET OF WITH NOT EQUAL TO
⊋8843228B SUPERSET OF WITH NOT EQUAL TO
⊌8844228C MULTISET
⊍8845228D MULTISET MULTIPLICATION
⊎8846228E MULTISET UNION
⊏8847228F SQUARE IMAGE OF
⊐88482290 SQUARE ORIGINAL OF
⊑88492291 SQUARE IMAGE OF OR EQUAL TO
⊒88502292 SQUARE ORIGINAL OF OR EQUAL TO
⊓88512293 SQUARE CAP
⊔88522294 SQUARE CUP
⊕88532295&oplus;CIRCLED PLUS
⊖88542296 CIRCLED MINUS
⊗88552297&otimes;CIRCLED TIMES
⊘88562298 CIRCLED DIVISION SLASH
⊙88572299 CIRCLED DOT OPERATOR
⊚8858229A CIRCLED RING OPERATOR
⊛8859229B CIRCLED ASTERISK OPERATOR
⊜8860229C CIRCLED EQUALS
⊝8861229D CIRCLED DASH
⊞8862229E SQUARED PLUS
⊟8863229F SQUARED MINUS
⊠886422A0 SQUARED TIMES
⊡886522A1 SQUARED DOT OPERATOR
⊢886622A2 RIGHT TACK
⊣886722A3 LEFT TACK
⊤886822A4 DOWN TACK
⊥886922A5&perp;UP TACK
⊦887022A6 ASSERTION
⊧887122A7 MODELS
⊨887222A8 TRUE
⊩887322A9 FORCES
⊪887422AA TRIPLE VERTICAL BAR RIGHT TURNSTILE
⊫887522AB DOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE
⊬887622AC DOES NOT PROVE
⊭887722AD NOT TRUE
⊮887822AE DOES NOT FORCE
⊯887922AF NEGATED DOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE
⊰888022B0 PRECEDES UNDER RELATION
⊱888122B1 SUCCEEDS UNDER RELATION
⊲888222B2 NORMAL SUBGROUP OF
⊳888322B3 CONTAINS AS NORMAL SUBGROUP
⊴888422B4 NORMAL SUBGROUP OF OR EQUAL TO
⊵888522B5 CONTAINS AS NORMAL SUBGROUP OR EQUAL TO
⊶888622B6 ORIGINAL OF
⊷888722B7 IMAGE OF
⊸888822B8 MULTIMAP
⊹888922B9 HERMITIAN CONJUGATE MATRIX
⊺889022BA INTERCALATE
⊻889122BB XOR
⊼889222BC NAND
⊽889322BD NOR
⊾889422BE RIGHT ANGLE WITH ARC
⊿889522BF RIGHT TRIANGLE
⋀889622C0 N-ARY LOGICAL AND
⋁889722C1 N-ARY LOGICAL OR
⋂889822C2 N-ARY INTERSECTION
⋃889922C3 N-ARY UNION
⋄890022C4 DIAMOND OPERATOR
⋅890122C5&sdot;DOT OPERATOR
⋆890222C6 STAR OPERATOR
⋇890322C7 DIVISION TIMES
⋈890422C8 BOWTIE
⋉890522C9 LEFT NORMAL FACTOR SEMIDIRECT PRODUCT
⋊890622CA RIGHT NORMAL FACTOR SEMIDIRECT PRODUCT
⋋890722CB LEFT SEMIDIRECT PRODUCT
⋌890822CC RIGHT SEMIDIRECT PRODUCT
⋍890922CD REVERSED TILDE EQUALS
⋎891022CE CURLY LOGICAL OR
⋏891122CF CURLY LOGICAL AND
⋐891222D0 DOUBLE SUBSET
⋑891322D1 DOUBLE SUPERSET
⋒891422D2 DOUBLE INTERSECTION
⋓891522D3 DOUBLE UNION
⋔891622D4 PITCHFORK
⋕891722D5 EQUAL AND PARALLEL TO
⋖891822D6 LESS-THAN WITH DOT
⋗891922D7 GREATER-THAN WITH DOT
⋘892022D8 VERY MUCH LESS-THAN
⋙892122D9 VERY MUCH GREATER-THAN
⋚892222DA LESS-THAN EQUAL TO OR GREATER-THAN
⋛892322DB GREATER-THAN EQUAL TO OR LESS-THAN
⋜892422DC EQUAL TO OR LESS-THAN
⋝892522DD EQUAL TO OR GREATER-THAN
⋞892622DE EQUAL TO OR PRECEDES
⋟892722DF EQUAL TO OR SUCCEEDS
⋠892822E0 DOES NOT PRECEDE OR EQUAL
⋡892922E1 DOES NOT SUCCEED OR EQUAL
⋢893022E2 NOT SQUARE IMAGE OF OR EQUAL TO
⋣893122E3 NOT SQUARE ORIGINAL OF OR EQUAL TO
⋤893222E4 SQUARE IMAGE OF OR NOT EQUAL TO
⋥893322E5 SQUARE ORIGINAL OF OR NOT EQUAL TO
⋦893422E6 LESS-THAN BUT NOT EQUIVALENT TO
⋧893522E7 GREATER-THAN BUT NOT EQUIVALENT TO
⋨893622E8 PRECEDES BUT NOT EQUIVALENT TO
⋩893722E9 SUCCEEDS BUT NOT EQUIVALENT TO
⋪893822EA NOT NORMAL SUBGROUP OF
⋫893922EB DOES NOT CONTAIN AS NORMAL SUBGROUP
⋬894022EC NOT NORMAL SUBGROUP OF OR EQUAL TO
⋭894122ED DOES NOT CONTAIN AS NORMAL SUBGROUP OR EQUAL
⋮894222EE VERTICAL ELLIPSIS
⋯894322EF MIDLINE HORIZONTAL ELLIPSIS
⋰894422F0 UP RIGHT DIAGONAL ELLIPSIS
⋱894522F1 DOWN RIGHT DIAGONAL ELLIPSIS
⋲894622F2 ELEMENT OF WITH LONG HORIZONTAL STROKE
⋳894722F3 ELEMENT OF WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋴894822F4 SMALL ELEMENT OF WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋵894922F5 ELEMENT OF WITH DOT ABOVE
⋶895022F6 ELEMENT OF WITH OVERBAR
⋷895122F7 SMALL ELEMENT OF WITH OVERBAR
⋸895222F8 ELEMENT OF WITH UNDERBAR
⋹895322F9 ELEMENT OF WITH TWO HORIZONTAL STROKES
⋺895422FA CONTAINS WITH LONG HORIZONTAL STROKE
⋻895522FB CONTAINS WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋼895622FC SMALL CONTAINS WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋽895722FD CONTAINS WITH OVERBAR
⋾895822FE SMALL CONTAINS WITH OVERBAR
⋿895922FF Z NOTATION BAG MEMBERSHIP

HTML Charset

Untuk menampilkan halaman HTML dengan benar, browser web harus mengetahui karakter (character encoding) untuk digunakan.

Apa Pengkodean Karakter?

ASCII adalah standar pengkodean karakter pertama (juga disebut set karakter). Ini mendefinisikan 127 karakter alfanumerik yang berbeda yang dapat digunakan di internet.
Nomor ASCII didukung (0-9), huruf Inggris (AZ), dan beberapa karakter khusus seperti! $ + - () @ < > .
ANSI (Windows-1252) adalah set karakter asli Windows. Ini didukung 256 kode karakter yang berbeda.
ISO-8859-1 adalah karakter default diatur untuk HTML 4. Hal ini juga didukung 256 kode karakter yang berbeda.
Karena ANSI dan ISO terbatas, pengkodean karakter default diubah menjadi UTF-8 di HTML5.
UTF-8 (Unicode) mencakup hampir semua karakter dan simbol di dunia.

Perbedaan Antara Set Karakter

Tabel berikut menampilkan perbedaan antara set karakter yang dijelaskan di atas:
Numb ASCII ANSI 8859 UTF-8 Description
32 space
33!!!!exclamation mark
34""""quotation mark
35####number sign
36$$$$dollar sign
37%%%%percent sign
38&&&&ampersand
39''''apostrophe
40((((left parenthesis
41))))right parenthesis
42****asterisk
43++++plus sign
44,,,,comma
45----hyphen-minus
46....full stop
47////solidus
480000digit zero
491111digit one
502222digit two
513333digit three
524444digit four
535555digit five
546666digit six
557777digit seven
568888digit eight
579999digit nine
58::::colon
59;;;;semicolon
60<<<<less-than sign
61====equals sign
62>>>>greater-than sign
63????question mark
64@@@@commercial at
65AAAALatin capital letter A
66BBBBLatin capital letter B
67CCCCLatin capital letter C
68DDDDLatin capital letter D
69EEEELatin capital letter E
70FFFFLatin capital letter F
71GGGGLatin capital letter G
72HHHHLatin capital letter H
73IIIILatin capital letter I
74JJJJLatin capital letter J
75KKKKLatin capital letter K
76LLLLLatin capital letter L
77MMMMLatin capital letter M
78NNNNLatin capital letter N
79OOOOLatin capital letter O
80PPPPLatin capital letter P
81QQQQLatin capital letter Q
82RRRRLatin capital letter R
83SSSSLatin capital letter S
84TTTTLatin capital letter T
85UUUULatin capital letter U
86VVVVLatin capital letter V
87WWWWLatin capital letter W
88XXXXLatin capital letter X
89YYYYLatin capital letter Y
90ZZZZLatin capital letter Z
91[[[[left square bracket
92\\\\reverse solidus
93]]]]right square bracket
94^^^^circumflex accent
95____low line
96````grave accent
97aaaaLatin small letter a
98bbbbLatin small letter b
99ccccLatin small letter c
100ddddLatin small letter d
101eeeeLatin small letter e
102ffffLatin small letter f
103ggggLatin small letter g
104hhhhLatin small letter h
105iiiiLatin small letter i
106jjjjLatin small letter j
107kkkkLatin small letter k
108llllLatin small letter l
109mmmmLatin small letter m
110nnnnLatin small letter n
111ooooLatin small letter o
112ppppLatin small letter p
113qqqqLatin small letter q
114rrrrLatin small letter r
115ssssLatin small letter s
116ttttLatin small letter t
117uuuuLatin small letter u
118vvvvLatin small letter v
119wwwwLatin small letter w
120xxxxLatin small letter x
121yyyyLatin small letter y
122zzzzLatin small letter z
123{{{{left curly bracket
124||||vertical line
125}}}}right curly bracket
126~~~~tilde
127DEL    
128 €  euro sign
129 NOT USED
130 ‚  single low-9 quotation mark
131 ƒ  Latin small letter f with hook
132 „  double low-9 quotation mark
133 …  horizontal ellipsis
134 †  dagger
135 ‡  double dagger
136 ˆ  modifier letter circumflex accent
137 ‰  per mille sign
138 Š  Latin capital letter S with caron
139 ‹  single left-pointing angle quotation mark
140 Œ  Latin capital ligature OE
141 NOT USED
142 Ž  Latin capital letter Z with caron
143 NOT USED
144 NOT USED
145 ‘  left single quotation mark
146 ’  right single quotation mark
147 “  left double quotation mark
148 ”  right double quotation mark
149 •  bullet
150 –  en dash
151 —  em dash
152 ˜  small tilde
153 ™  trade mark sign
154 š  Latin small letter s with caron
155 ›  single right-pointing angle quotation mark
156 œ  Latin small ligature oe
157 NOT USED
158 ž  Latin small letter z with caron
159 Ÿ  Latin capital letter Y with diaeresis
160    no-break space
161 ¡¡¡inverted exclamation mark
162 ¢¢¢cent sign
163 £££pound sign
164 ¤¤¤currency sign
165 ¥¥¥yen sign
166 ¦¦¦broken bar
167 §§§section sign
168 ¨¨¨diaeresis
169 ©©©copyright sign
170 ªªªfeminine ordinal indicator
171 «««left-pointing double angle quotation mark
172 ¬¬¬not sign
173 ­­­soft hyphen
174 ®®®registered sign
175 ¯¯¯macron
176 °°°degree sign
177 ±±±plus-minus sign
178 ²²²superscript two
179 ³³³superscript three
180 ´´´acute accent
181 µµµmicro sign
182 pilcrow sign
183 ···middle dot
184 ¸¸¸cedilla
185 ¹¹¹superscript one
186 ºººmasculine ordinal indicator
187 »»»right-pointing double angle quotation mark
188 ¼¼¼vulgar fraction one quarter
189 ½½½vulgar fraction one half
190 ¾¾¾vulgar fraction three quarters
191 ¿¿¿inverted question mark
192 ÀÀÀLatin capital letter A with grave
193 ÁÁÁLatin capital letter A with acute
194 ÂÂÂLatin capital letter A with circumflex
195 ÃÃÃLatin capital letter A with tilde
196 ÄÄÄLatin capital letter A with diaeresis
197 ÅÅÅLatin capital letter A with ring above
198 ÆÆÆLatin capital letter AE
199 ÇÇÇLatin capital letter C with cedilla
200 ÈÈÈLatin capital letter E with grave
201 ÉÉÉLatin capital letter E with acute
202 ÊÊÊLatin capital letter E with circumflex
203 ËËËLatin capital letter E with diaeresis
204 ÌÌÌLatin capital letter I with grave
205 ÍÍÍLatin capital letter I with acute
206 ÎÎÎLatin capital letter I with circumflex
207 ÏÏÏLatin capital letter I with diaeresis
208 ÐÐÐLatin capital letter Eth
209 ÑÑÑLatin capital letter N with tilde
210 ÒÒÒLatin capital letter O with grave
211 ÓÓÓLatin capital letter O with acute
212 ÔÔÔLatin capital letter O with circumflex
213 ÕÕÕLatin capital letter O with tilde
214 ÖÖÖLatin capital letter O with diaeresis
215 ×××multiplication sign
216 ØØØLatin capital letter O with stroke
217 ÙÙÙLatin capital letter U with grave
218 ÚÚÚLatin capital letter U with acute
219 ÛÛÛLatin capital letter U with circumflex
220 ÜÜÜLatin capital letter U with diaeresis
221 ÝÝÝLatin capital letter Y with acute
222 ÞÞÞLatin capital letter Thorn
223 ßßßLatin small letter sharp s
224 àààLatin small letter a with grave
225 áááLatin small letter a with acute
226 âââLatin small letter a with circumflex
227 ãããLatin small letter a with tilde
228 äääLatin small letter a with diaeresis
229 åååLatin small letter a with ring above
230 æææLatin small letter ae
231 çççLatin small letter c with cedilla
232 èèèLatin small letter e with grave
233 éééLatin small letter e with acute
234 êêêLatin small letter e with circumflex
235 ëëëLatin small letter e with diaeresis
236 ìììLatin small letter i with grave
237 íííLatin small letter i with acute
238 îîîLatin small letter i with circumflex
239 ïïïLatin small letter i with diaeresis
240 ðððLatin small letter eth
241 ñññLatin small letter n with tilde
242 òòòLatin small letter o with grave
243 óóóLatin small letter o with acute
244 ôôôLatin small letter o with circumflex
245 õõõLatin small letter o with tilde
246 öööLatin small letter o with diaeresis
247 ÷÷÷division sign
248 øøøLatin small letter o with stroke
249 ùùùLatin small letter u with grave
250 úúúLatin small letter u with acute
251 ûûûLatin small letter with circumflex
252 üüüLatin small letter u with diaeresis
253 ýýýLatin small letter y with acute
254 þþþLatin small letter thorn
255 ÿÿÿLatin small letter y with diaeresis

HTML URL Encode

Sebuah URL adalah kata lain untuk alamat web.
Sebuah URL dapat terdiri dari kata-kata (google.com), atau Internet Protocol (IP) address (192.68.20.50).
Kebanyakan orang memasukkan nama ketika berselancar, karena nama yang mudah diingat daripada nomor.

URL - Uniform Resource Locator

Web browser meminta halaman dari server web dengan menggunakan URL.
Ketika Anda mengklik pada link dalam halaman HTML, sebuah mendasari < a > poin tag ke alamat di web.
Sebuah Uniform Resource Locator (URL) digunakan untuk mengatasi dokumen (atau data lain) di web.
Sebuah alamat web, seperti http://www.nomor1.com/html/default.asp mengikuti aturan sintaks ini:
Contoh scheme://host.domain:port/path/filename
  • Scheme - mendefinisikan jenis layanan Internet ( paling umum adalah http )
  • host - mendefinisikan host domain (host default untuk http www )
  • domain - mendefinisikan nama domain Internet ( nomor1.com )
  • Port - mendefinisikan nomor port pada host ( default untuk http 80 )
  • path - path mendefinisikan di server ( Jika dihilangkan : direktori root dari situs )
  • filename - mendefinisikan nama dokumen atau sumber daya
Scheme Short for Used for
http HyperText Transfer Protocol Common web pages. Not encrypted
https Secure HyperText Transfer Protocol Secure web pages. Encrypted
ftp File Transfer Protocol Downloading or uploading files
file   A file on your computer

HTML XHTML

Apa itu XHTML?

XHTML singkatan E X tensible H yper T ext M arkup L anguage
XHTML hampir identik dengan HTML
XHTML adalah lebih ketat dibandingkan HTML
XHTML adalah HTML didefinisikan sebagai aplikasi XML
XHTML didukung oleh semua browser utama

Mengapa XHTML?

Banyak halaman di internet berisi "buruk" HTML.
Kode HTML ini bekerja dengan baik di hampir semua browser (bahkan jika tidak mengikuti aturan HTML):
Pasar saat ini terdiri dari teknologi browser yang berbeda. Beberapa browser dijalankan pada komputer, dan beberapa browser berjalan pada ponsel atau perangkat kecil lainnya. Perangkat yang lebih kecil sering kekurangan sumber daya atau kekuatan untuk menafsirkan "buruk" markup.
XML adalah bahasa markup mana dokumen harus ditandai dengan benar (menjadi "well-formed").
Dengan menggabungkan kekuatan dari HTML dan XML, XHTML dikembangkan.
XHTML adalah HTML didesain ulang sebagai XML.

Perbedaan Paling Penting dari HTML:

Struktur dokumen
XHTML DOCTYPE adalah wajib
Xmlns atribut di < html > adalah wajib
< html >, < head >, < title >, dan < body > adalah wajib
XHTML Elemen
Elemen XHTML harus diulang dengan benar
Elemen XHTML harus selalu ditutup
Elemen XHTML harus dalam huruf kecil
Dokumen XHTML harus memiliki satu elemen root
Atribut XHTML
Nama atribut harus dalam huruf kecil
Nilai atribut harus dikutip
Atribut minimalisasi dilarang
< ! DOCTYPE ....> Apakah Wajib
Sebuah dokumen XHTML harus memiliki deklarasi DOCTYPE XHTML.
Daftar lengkap semua XHTML Doctypes ditemukan dalam HTML Tag Reference kami.
code>< html>, < head>, < title>, dan < body > elemen juga harus hadir, dan xmlns atribut di < html > harus menentukan namespace xml untuk dokumen.
Contoh ini menunjukkan dokumen XHTML dengan minimal tag yang diperlukan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Title of document</title>
</head>

<body>
some content 
</body>

</html>
</pre>

HTML5 Intro

HTML 5 dibuat lebih sederhana, ciri - cirinya <!DOCTYPE html> dan meta charset utf-8
Terdapat beberapa tag yang muncul di HTML Versi 5 ini, antara lain :
  • Semantik < header >,< footer >,< section >,dan< article >
  • Kontrol baru seperti nomor, tanggal, waktu, kalender, dan jangkauan.
  • Grafid < svg >,< canvas >
  • Multimedia < video >,< audio >

HTML5 Dukungan

HTML5 didukung di semua browser modern.
Selain itu, semua browser, lama dan baru, otomatis menangani elemen yang belum diakui sebagai elemen inline.

HTML5 Elemen

Beberapa elemen baru yang ditambahkan pada HTML5
Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem>  Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

Elemen form yang baru

Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Form input yang baru

New Input Types New Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

HTML5 Semantik

Elemen HTML yang bersifat semantik adalah
  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>
    •

HTML5 Migrasi

Migrasi dari HTML4 ke HTML5
Bab ini sepenuhnya tentang bagaimana untuk bermigrasi dari halaman HTML4 khas ke halaman HTML5 khas.
Bab ini menunjukkan bagaimana mengkonversi halaman HTML4 yang ada ke dalam halaman HTML5, tanpa merusak apapun dari konten asli atau struktur.
Tipe HTML4 Tipe HTML5
<div id="header"> <header>
<div id="menu"> <nav>
<div id="content"> <section>
<div id="post"> <article>
<div id="footer"> <footer>

HTML5 Style Guide

Pengembang web sering tidak pasti tentang gaya coding dan sintaks untuk digunakan dalam HTML.
Antara tahun 2000 dan 2010, banyak pengembang web dikonversi dari HTML ke XHTML.
Dengan XHTML, pengembang dipaksa untuk menulis sah dan "well-formed" kode.
HTML5 adalah sedikit lebih ceroboh ketika melakukan kode validasi.
Dalam penulisan tag HTML, usahakan sesuai aturan, semisal tag yang aslinya besar maka ditulis besar begitu sebaliknya tag yang aslinya kecil ditulis kecil, serta jangan lupa untuk menutup jika tag merupakan jenis berpasangan .

HTML5 Form

tag HTML untuk form adalah < form >< /form>
Didalam form akan ada beberapa input, yaitu
<form action="action_page.php" method="GET/POST">
Nama depan:<br>
<input type="text" name="firstname">
<br>
Nama akhir:<br>
<input type="text" name="lastname"> <br>

Jenis Kelamin <br>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female <br>


Hobi <br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car <br>

Pilih <br>

<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

<br>



Password:<br>
<input type="password" name="psw">

<br>
Pekerjaan <br>

<select name="pekerjaan">
<option value="SWASTA">SWASTA</option>
<option value="PNS">PNS</option>
<option value="Wiraswasta">Wiraswasta</option>			
</select>
<br>
<br>
<input type="file" name="foto"> <br>
<br>
<input type="submit" value="Submit"><br>
</form>
Nama depan:

Nama akhir:

Jenis Kelamin
Male Female
Hobi
I have a bike
I have a car
Pilih

Password:

Pekerjaan







Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).

HTML Graphics

HTML Canvas

Apa Canvas?

Kanvas adalah media untuk lukisan cat minyak. Salah satu minyak paling awal di atas kanvas adalah Madonna Perancis dari 1410. kanvas biasanya membentang di bingkai kayu.
Pada kanvas HTML, Anda dapat menarik semua jenis grafis, dari garis sederhana, objek grafis yang kompleks.

HTML < canvas > Elemen

HTML < canvas > elemen (diperkenalkan di HTML5) merupakan wadah untuk grafis kanvas.
Kanvas HTML adalah area persegi pada halaman HTML.
Kanvas memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

HTML SVG

Apa itu SVG?

SVG adalah singkatan dari Scalable Vector Graphics
SVG digunakan untuk mendefinisikan grafis untuk Web
SVG adalah rekomendasi W3C
HTML < svg > Elemen
HTML < svg > elemen (diperkenalkan di HTML5) merupakan wadah untuk grafis SVG.< /svg >
SVG memiliki beberapa metode untuk menggambar jalan, kotak, lingkaran, teks, dan gambar grafis.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Maaf, browser anda tidak support inline SVG.
</svg>

<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Sorry, your browser does not support inline SVG. 
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Maaf, browser tidak support
</svg>
SVG Sorry, your browser does not support inline SVG.

Perbedaan Antara SVG dan Canvas

SVG adalah bahasa untuk menggambarkan grafis 2D dalam XML.
Kanvas menarik grafis 2D, on the fly (dengan JavaScript).
SVG adalah berbasis XML, yang berarti bahwa setiap elemen tersedia dalam SVG DOM. Anda dapat melampirkan JavaScript event handler untuk elemen.
Di SVG, setiap bentuk digambar dikenang sebagai objek. Jika atribut dari sebuah objek SVG berubah, browser dapat secara otomatis kembali membuat bentuk.
Kanvas diberikan pixel dengan pixel. Dalam kanvas, setelah grafik ditarik, telah dilupakan oleh browser. Jika posisinya harus diubah, seluruh adegan perlu digambar ulang, termasuk benda yang mungkin telah ditutupi oleh grafik.

Perbandingan Canvas dan SVG

Tabel di bawah ini menunjukkan beberapa perbedaan penting antara kanvas dan SVG:
Canvas SVG
  • Resolution dependent
  • No support for event handlers
  • Poor text rendering capabilities
  • You can save the resulting image as .png or .jpg
  • Well suited for graphic-intensive games
  • Resolution independent
  • Support for event handlers
  • Best suited for applications with large rendering areas (Google Maps)
  • Slow rendering if complex (anything that uses the DOM a lot will be slow)
  • Not suited for game applications

HTML Media

Multimedia di web, adalah suara, musik, video, film, dan animasi.

Apa Multimedia?

Multimedia datang dalam berbagai format. Hal ini dapat hampir apapun yang Anda bisa mendengar atau melihat.
Contoh: Gambar, musik, suara, video, catatan, film, animasi, dan banyak lagi.
Halaman web sering berisi elemen-elemen multimedia jenis dan format yang berbeda.
Dalam bab ini Anda akan belajar tentang format multimedia yang berbeda.

Dukungan Browser

Web browser pertama memiliki dukungan untuk teks saja, terbatas pada font tunggal dalam satu warna.
Kemudian datang browser dengan dukungan untuk warna dan font, dan bahkan dukungan untuk gambar!
Dukungan untuk suara, animasi, dan video ditangani secara berbeda oleh berbagai browser. Berbagai jenis dan format yang didukung, dan beberapa format membutuhkan program pembantu tambahan (plug-in) untuk bekerja.
Mudah-mudahan ini akan menjadi sejarah. HTML5 multimedia menjanjikan masa depan yang lebih mudah untuk multimedia.

Format Multimedia

Elemen multimedia (seperti suara atau video) disimpan dalam file media.
Cara yang paling umum untuk menemukan jenis file, adalah dengan melihat ekstensi file. Ketika browser melihat ekstensi .htm file atau html, itu akan memperlakukan file sebagai file HTML. Perpanjangan xml menunjukkan file XML, dan ekstensi css menunjukkan file style sheet. Gambar diakui oleh ekstensi seperti .gif, .png dan .jpg.
File multimedia juga memiliki format sendiri dan ekstensi yang berbeda seperti: swf, .wav, .mp3, .mp4, mpg, wmv, avi dan.

Video Format umum

Videoformats MP4 adalah format baru dan mendatang untuk video internet.
MP4 direkomendasikan oleh YouTube.
MP4 didukung oleh Flash gamers
MP4 didukung oleh HTML5.
Format File Description
MPEG .mpg
.mpeg		 MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4).
AVI .avi AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
WMV .wmv WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
QuickTime .mov QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays well on Apple computers, but not in web browsers. (See MP4)
RealVideo .rm
.ram		 RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still used for online video and Internet TV, but does not play in web browsers.
Flash .swf
.flv		 Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.
Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
WebM .webm WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by HTML5.
MPEG-4
or MP4		 .mp4 MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended by YouTube. 

Format suara

MP3 adalah format terbaru untuk kompresi rekaman musik. Istilah MP3 telah menjadi identik dengan musik digital.
Jika situs Web Anda tentang rekaman musik, MP3 adalah pilihan.
Format File Description
MIDI .mid
.midi		 MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers.
RealAudio .rm
.ram		 RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers.
WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Commonly used in music players. Plays well on Windows computers, but not in web browsers.
AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.
WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML5.
Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5.
MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.
MP4 .mp4 MP4 is a video format, but can also be used for audio. MP4 video is the upcoming video format on the internet. This leads to automatic support for MP4 audio by all browsers.

HTML Video

HTML video hanya support dengan 3 format yaitu mp4,ogg,dan webm.
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

HTML Audio

HTML Audio hanya support dengan format mp3,wav,ogg
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES 
<!DOCTYPE html>
<html>
<body>

<audio controls>
<source src="http://ayoberbisnis.co.id/_free/Syahnan%20Palipi%20-%20Budaya%20Bisnis.ogg" type="audio/ogg">
<source src="http://ayoberbisnis.co.id/_free/Syahnan%20Palipi%20-%20Budaya%20Bisnis.mp3" type="audio/mpeg">
Browser anda tidak support dengan elemen ini
</audio>

</body>
</html>

HTML Plug-in

Tujuan dari plug-in, adalah untuk memperluas fungsionalitas dari browser HTML.

HTML Pembantu (Plug-in)

Aplikasi pembantu adalah program komputer yang memperluas fungsionalitas standar web browser.
Aplikasi bantuan juga disebut plug-in
Contoh terkenal plug-in yang applet Java.
Plug-in dapat ditambahkan ke halaman web dengan < object > tag atau < embed > tag.< /object >
Plug-in dapat digunakan untuk berbagai tujuan: peta display, memindai virus, memverifikasi id bank Anda, dll
Catatan : Untuk menampilkan video dan audio: Gunakan < video > dan < audio > tag. < Object > Elemen
< Object > elemen didukung oleh semua browser.
< Object > mendefinisikan sebuah objek tertanam dalam dokumen HTML.

Hal ini digunakan untuk menanamkan plug-in (seperti applet Java, pembaca PDF, Flash Player) dalam halaman web.
Contoh
< object width="400" height="50" data="bookmark.swf">< / object>
< Object> elemen juga dapat digunakan untuk memasukkan HTML dalam HTML:
Contoh
< object width="100%" height="500px" data="snippet.html">< /object>
Atau gambar jika Anda suka:
Contoh
< object data="audi.jpeg">< /object>
Catatan Perhatikan bahwa < embed > elemen tidak memiliki tag penutup. Tidak dapat berisi teks alternatif.

HTML YouTube

Cara termudah untuk memutar video dalam HTML, adalah dengan menggunakan YouTube.
<!DOCTYPE html>
<html>
<body>

<iframe width="560" height="315" src="https://www.youtube.com/embed/wdM8NA6gNXs" frameborder="0" allowfullscreen></iframe>

</body>
</html>

HTML APIs

HTML Geolocation

Cari Posisi Pengguna

HTML Geolocation API digunakan untuk mendapatkan posisi geografis pengguna.
Karena ini bisa kompromi privasi pengguna, posisi tidak tersedia kecuali pengguna menyetujuinya.
Internet Explorer 9 +, Firefox, Chrome, Safari dan Opera mendukung Geolocation.
Catatan: Geolocation jauh lebih akurat untuk perangkat dengan GPS, seperti iPhone.

Menggunakan HTML Geolocation

Gunakan metode getCurrentPosition () untuk mendapatkan posisi pengguna.
Contoh di bawah ini adalah contoh sederhana Geolocation kembali garis lintang dan bujur dari posisi pengguna:
<!DOCTYPE html>
<html>
<body>

<p>klik untuk mendapatkan lokasi</p>

<button onclick="getLocation()">Try It</button>

<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else { 
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + 
"<br>Longitude: " + position.coords.longitude;	
}
</script>

</body>
</html>

HTML Drag/Drop

Drag dan drop adalah fitur yang sangat umum. Ini adalah ketika Anda "ambil" objek dan tarik ke lokasi yang berbeda.
Support dengan browser : Internet Explorer 9 +, Firefox, Opera, Chrome, dan Safari dukungan drag dan drop.
Catatan: Drag and drop tidak bekerja di Safari 5.1.7 dan versi sebelumnya.
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the NOMOR1 image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

HTML Local Storage

Apa HTML Penyimpanan Lokal?

Dengan penyimpanan lokal, aplikasi web dapat menyimpan data secara lokal dalam browser pengguna.
Sebelum HTML5, data aplikasi harus disimpan dalam cookie, termasuk dalam setiap permintaan server. Penyimpanan lokal lebih aman, dan sejumlah besar data dapat disimpan secara lokal, tanpa mempengaruhi kinerja website.
Tidak seperti cookies, batas penyimpanan yang jauh lebih besar (setidaknya 5MB) dan informasi tidak pernah ditransfer ke server.
Penyimpanan lokal adalah per domain. Semua halaman, dari satu domain, dapat menyimpan dan mengakses data yang sama.
Penyimpanan lokal didukung di Internet Explorer 8+, Firefox, Opera, Chrome, dan Safari.
Catatan: Internet Explorer 7 dan versi sebelumnya, tidak mendukung Penyimpanan Web.

HTML Penyimpanan Lokal Objects

HTML penyimpanan lokal menyediakan dua objek untuk menyimpan data pada klien:
window.localStorage - menyimpan data tanpa tanggal kedaluwarsa
window.sessionStorage - menyimpan data untuk satu sesi (data hilang ketika tab ditutup)
Sebelum menggunakan penyimpanan lokal, periksa dukungan browser untuk localStorage dan sessionStorage:
if(typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage. 
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

Objek localStorage menyimpan data tanpa tanggal kedaluwarsa. Data tidak akan dihapus ketika browser ditutup, dan akan tersedia pada hari berikutnya, minggu, atau tahun.
Contoh 
<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) != "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
Keterangan
Buat nama localStorage / nilai pasangan dengan name = "nama belakang" dan value = "Smith" Ambil nilai "nama belakang" dan masukkan ke dalam elemen dengan id = "hasil"
Contoh di atas juga bisa ditulis seperti ini: 
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Sintaks untuk menghapus "nama belakang" item localStorage adalah sebagai berikut:
localStorage.removeItem("lastname");
Catatan: Nama / nilai pasangan selalu disimpan sebagai string. Ingatlah untuk mengkonversikannya ke format lain bila diperlukan!
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol. Dalam kode ini string nilai dikonversi menjadi angka untuk dapat meningkatkan counter:
Contoh 
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button><p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

The sessionStorage Object

Objek sessionStorage sama dengan objek localStorage, kecuali bahwa itu menyimpan data hanya untuk satu sesi. Data akan dihapus saat pengguna menutup jendela browser.
Contoh berikut menghitung berapa kali pengguna telah mengklik tombol, dalam sesi saat ini:
Contoh 
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>

HTML App Cache

Dengan aplikasi tembolok mudah untuk membuat versi offline aplikasi web, dengan membuat file manifest tembolok.
Apa Aplikasi Cache?
HTML5 memperkenalkan Cache aplikasi, yang berarti bahwa aplikasi web cache, dan dapat diakses tanpa koneksi internet.
Cache aplikasi memberikan sebuah aplikasi tiga keuntungan:
  - Offline browsing - pengguna dapat menggunakan aplikasi ini ketika mereka sedang offline
  - Kecepatan - cache sumber memuat lebih cepat
  - Mengurangi beban server - browser hanya akan mendownload update / mengubah sumber daya dari server
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>

<script src="demo_time.js"></script>

<p id="timePara"><button onclick="getDateTime()">Get Date and Time</button></p>

<p><img src="img_logo.gif" width="336" height="69"></p>

<p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this page</a>, then go offline, and reload the page. The script and the image should still work.</p>

</body>
</html>
Setiap halaman dengan atribut manifest ditentukan akan di-cache ketika pengguna mengunjungi itu. Jika atribut nyata tidak ditentukan, halaman tidak akan di-cache (kecuali halaman ditentukan langsung dalam file manifest).
Ekstensi file yang dianjurkan untuk file manifest adalah: ".appcache"
Catatan :Sebuah file manifest perlu disajikan dengan jenis media yang benar, yaitu "text / cache-manifest". Harus dikonfigurasi pada server web.
The Manifest Berkas
File manifest adalah file teks sederhana yang memberitahu browser apa untuk cache (dan apa yang harus pernah Cache).
File manifest memiliki tiga bagian:
CACHE MANIFEST - File terdaftar di bawah header ini akan di-cache setelah mereka di-download untuk pertama kalinya
NETWORK - File terdaftar di bawah header ini membutuhkan koneksi ke server, dan tidak akan pernah cache
Cadangan - File terdaftar di bawah header ini menentukan halaman mundur jika halaman tidak bisa diakses
Hati-hati dengan apa yang Anda cache.
Setelah file cache, browser akan terus menunjukkan versi cache, bahkan jika Anda mengubah file di server. Untuk memastikan update browser cache, Anda perlu mengubah file manifest.
Catatan: Browser mungkin memiliki batas ukuran yang berbeda untuk data cache (beberapa browser memiliki batas 5MB per situs).

HTML Web Workers

Seorang pekerja web adalah JavaScript yang berjalan di latar belakang, tanpa mempengaruhi kinerja halaman.
Apa yang dimaksud dengan Pekerja Web?
Ketika menjalankan skrip di halaman HTML, halaman menjadi tidak responsif sampai script selesai.
Seorang pekerja web adalah JavaScript yang berjalan di latar belakang, independen dari script lain, tanpa mempengaruhi kinerja halaman. Anda dapat terus melakukan apa pun yang Anda inginkan: mengklik, memilih hal-hal, dll, sedangkan pekerja web berjalan di latar belakang.
HTML Web worker support dengan semua browser
<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"> </output>  </p>
<button onclick="startWorker()">Start Worker</button>>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}

function stopWorker() { 
w.terminate();
w = undefined;
}
</script>

</body>
</html>

Hasil

Count numbers:



HTML SSE

Server-Sent Events memungkinkan halaman web untuk mendapatkan update dari server.

Server-Sent Events - One Way Pesan

Sebuah peristiwa-server dikirim adalah ketika sebuah halaman web secara otomatis mendapatkan update dari server.
Hal ini juga mungkin sebelumnya, tetapi halaman web harus bertanya jika ada update yang tersedia. Dengan peristiwa-server dikirim, update datang secara otomatis.
Contoh: update Facebook / Twitter, update harga saham, feed berita, hasil olahraga, dll

Browser yang support

Server-Sent Events didukung di semua browser utama (Firefox,Opera,Google Chrome,Safari), kecuali Internet Explorer.
Menerima Server-Sent Pemberitahuan Acara
Objek EventSource digunakan untuk menerima pemberitahuan event-server dikirim:
<!DOCTYPE html>
<html>
<body>

<h1>Getting server updates</h1>
<div id="result"></div>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "
";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support server-sent events...";
}
</script>

</body>
</html>
  • Membuat objek EventSource baru, dan menentukan URL dari halaman pengiriman update
  • Setiap kali update diterima, acara onmessage terjadi
  • Ketika acara onmessage terjadi, menempatkan data yang diterima ke dalam elemen dengan id = "hasil"

Periksa Server-Sent Events Dukungan

Pada contoh di atas tryit ada beberapa baris tambahan kode untuk memeriksa dukungan browser untuk acara-server dikirim:
if(typeof(EventSource) !== "undefined") {
// Yes! Server-sent events support!
// Some code..... 
} else {
// Sorry! No server-sent events support..
}
Server-Side Kode Contoh
Sebagai contoh di atas untuk bekerja, Anda memerlukan server yang mampu mengirimkan update data (seperti PHP atau ASP).
Server-side sintaks aliran acara sederhana. Mengatur "Content-Type" header "text / event-stream". Sekarang Anda dapat mulai mengirim event stream.
Kode di PHP (demo_sse.php): 
< ?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
? >
Kode di ASP (VB) (demo_sse.asp):
< %
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
% >

Keterangan:

Mengatur "Content-Type" header "text / event-stream"
Tentukan bahwa halaman tidak harus cache
Output data untuk mengirim (Selalu mulai dengan "Data:")
Siram data output kembali ke halaman web
The EventSource Object
Dalam contoh di atas kita menggunakan event onmessage untuk mendapatkan pesan. Tapi acara lainnya juga tersedia:

Events Description
onopen Ketika koneksi ke server dibuka
onmessage Ketika pesan diterima
onerror Ketika terjadi kesalahan


SUMBER:http://sanl1509.nom1.in/sanl1509

Nilai artikelnya:

Tags

Post a Comment

0 Comments
Google