» » Belajar HTML

Belajar HTML

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>

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
∁87052201COMPLEMENT
∂87062202&part;PARTIAL DIFFERENTIAL
∃87072203&exist;THERE EXISTS
∄87082204THERE DOES NOT EXIST
∅87092205&empty;EMPTY SET
∅87102206INCREMENT
∇87112207&nabla;NABLA
∈87122208&isin;ELEMENT OF
∉87132209&notin;NOT AN ELEMENT OF
∊8714220ASMALL ELEMENT OF
∋8715220B&ni;CONTAINS AS MEMBER
∌8716220CDOES NOT CONTAIN AS MEMBER
∍8717220DSMALL CONTAINS AS MEMBER
∎8718220EEND OF PROOF
∏8719220F&prod;N-ARY PRODUCT
∐87202210N-ARY COPRODUCT
∑87212211&sum;N-ARY SUMMATION
−87222212&minus;MINUS SIGN
∓87232213MINUS-OR-PLUS SIGN
∔87242214DOT PLUS
∕87252215DIVISION SLASH
∖87262216SET MINUS
∗87272217&lowast;ASTERISK OPERATOR
∘87282218RING OPERATOR
∙87292219BULLET OPERATOR
√8730221A&radic;SQUARE ROOT
∛8731221BCUBE ROOT
∜8732221CFOURTH ROOT
∝8733221D&prop;PROPORTIONAL TO
∞8734221E&infin;INFINITY
∟8735221FRIGHT ANGLE
∠87362220&ang;ANGLE
∡87372221MEASURED ANGLE
∢87382222SPHERICAL ANGLE
∣87392223DIVIDES
∤87402224DOES NOT DIVIDE
∥87412225PARALLEL TO
∦87422226NOT PARALLEL TO
∧87432227&and;LOGICAL AND
∨87442228&or;LOGICAL OR
∩87452229&cap;INTERSECTION
∪8746222A&cup;UNION
∫8747222B&int;INTEGRAL
∬8748222CDOUBLE INTEGRAL
∭8749222DTRIPLE INTEGRAL
∮8750222ECONTOUR INTEGRAL
∯8751222FSURFACE INTEGRAL
∰87522230VOLUME INTEGRAL
∱87532231CLOCKWISE INTEGRAL
∲87542232CLOCKWISE CONTOUR INTEGRAL
∳87552233ANTICLOCKWISE CONTOUR INTEGRAL
∴87562234&there4;THEREFORE
∵87572235BECAUSE
∶87582236RATIO
∷87592237PROPORTION
∸87602238DOT MINUS
∹87612239EXCESS
∺8762223AGEOMETRIC PROPORTION
∻8763223BHOMOTHETIC
∼8764223C&sim;TILDE OPERATOR
∽8765223DREVERSED TILDE
∾8766223EINVERTED LAZY S
∿8767223FSINE WAVE
≀87682240WREATH PRODUCT
≁87692241NOT TILDE
≂87702242MINUS TILDE
≃87712243ASYMPTOTICALLY EQUAL TO
≄87722244NOT ASYMPTOTICALLY EQUAL TO
≅87732245&cong;APPROXIMATELY EQUAL TO
≆87742246APPROXIMATELY BUT NOT ACTUALLY EQUAL TO
≇87752247NEITHER APPROXIMATELY NOR ACTUALLY EQUAL TO
≈87762248&asymp;ALMOST EQUAL TO
≉87772249NOT ALMOST EQUAL TO
≊8778224AALMOST EQUAL OR EQUAL TO
≋8779224BTRIPLE TILDE
≌8780224CALL EQUAL TO
≍8781224DEQUIVALENT TO
≎8782224EGEOMETRICALLY EQUIVALENT TO
≏8783224FDIFFERENCE BETWEEN
≐87842250APPROACHES THE LIMIT
≑87852251GEOMETRICALLY EQUAL TO
≒87862252APPROXIMATELY EQUAL TO OR THE IMAGE OF
≓87872253IMAGE OF OR APPROXIMATELY EQUAL TO
≔87882254COLON EQUALS
≕87892255EQUALS COLON
≖87902256RING IN EQUAL TO
≗87912257RING EQUAL TO
≘87922258CORRESPONDS TO
≙87932259ESTIMATES
≚8794225AEQUIANGULAR TO
≛8795225BSTAR EQUALS
≜8796225CDELTA EQUAL TO
≝8797225DEQUAL TO BY DEFINITION
≞8798225EMEASURED BY
≟8799225FQUESTIONED EQUAL TO
≠88002260&ne;NOT EQUAL TO
≡88012261&equiv;IDENTICAL TO
≢88022262NOT IDENTICAL TO
≣88032263STRICTLY EQUIVALENT TO
≤88042264&le;LESS-THAN OR EQUAL TO
≥88052265&ge;GREATER-THAN OR EQUAL TO
≦88062266LESS-THAN OVER EQUAL TO
≧88072267GREATER-THAN OVER EQUAL TO
≨88082268LESS-THAN BUT NOT EQUAL TO
≩88092269GREATER-THAN BUT NOT EQUAL TO
≪8810226AMUCH LESS-THAN
≫8811226BMUCH GREATER-THAN
≬8812226CBETWEEN
≭8813226DNOT EQUIVALENT TO
≮8814226ENOT LESS-THAN
≯8815226FNOT GREATER-THAN
≰88162270NEITHER LESS-THAN NOR EQUAL TO
≱88172271NEITHER GREATER-THAN NOR EQUAL TO
≲88182272LESS-THAN OR EQUIVALENT TO
≳88192273GREATER-THAN OR EQUIVALENT TO
≴88202274NEITHER LESS-THAN NOR EQUIVALENT TO
≵88212275NEITHER GREATER-THAN NOR EQUIVALENT TO
≶88222276LESS-THAN OR GREATER-THAN
≷88232277GREATER-THAN OR LESS-THAN
≸88242278NEITHER LESS-THAN NOR GREATER-THAN
≹88252279NEITHER GREATER-THAN NOR LESS-THAN
≺8826227APRECEDES
≻8827227BSUCCEEDS
≼8828227CPRECEDES OR EQUAL TO
≽8829227DSUCCEEDS OR EQUAL TO
≾8830227EPRECEDES OR EQUIVALENT TO
≿8831227FSUCCEEDS OR EQUIVALENT TO
⊀88322280DOES NOT PRECEDE
⊁88332281DOES NOT SUCCEED
⊂88342282&sub;SUBSET OF
⊃88352283&sup;SUPERSET OF
⊄88362284&nsub;NOT A SUBSET OF
⊅88372285NOT A SUPERSET OF
⊆88382286&sube;SUBSET OF OR EQUAL TO
⊇88392287&supe;SUPERSET OF OR EQUAL TO
⊈88402288NEITHER A SUBSET OF NOR EQUAL TO
⊉88412289NEITHER A SUPERSET OF NOR EQUAL TO
⊊8842228ASUBSET OF WITH NOT EQUAL TO
⊋8843228BSUPERSET OF WITH NOT EQUAL TO
⊌8844228CMULTISET
⊍8845228DMULTISET MULTIPLICATION
⊎8846228EMULTISET UNION
⊏8847228FSQUARE IMAGE OF
⊐88482290SQUARE ORIGINAL OF
⊑88492291SQUARE IMAGE OF OR EQUAL TO
⊒88502292SQUARE ORIGINAL OF OR EQUAL TO
⊓88512293SQUARE CAP
⊔88522294SQUARE CUP
⊕88532295&oplus;CIRCLED PLUS
⊖88542296CIRCLED MINUS
⊗88552297&otimes;CIRCLED TIMES
⊘88562298CIRCLED DIVISION SLASH
⊙88572299CIRCLED DOT OPERATOR
⊚8858229ACIRCLED RING OPERATOR
⊛8859229BCIRCLED ASTERISK OPERATOR
⊜8860229CCIRCLED EQUALS
⊝8861229DCIRCLED DASH
⊞8862229ESQUARED PLUS
⊟8863229FSQUARED MINUS
⊠886422A0SQUARED TIMES
⊡886522A1SQUARED DOT OPERATOR
⊢886622A2RIGHT TACK
⊣886722A3LEFT TACK
⊤886822A4DOWN TACK
⊥886922A5&perp;UP TACK
⊦887022A6ASSERTION
⊧887122A7MODELS
⊨887222A8TRUE
⊩887322A9FORCES
⊪887422AATRIPLE VERTICAL BAR RIGHT TURNSTILE
⊫887522ABDOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE
⊬887622ACDOES NOT PROVE
⊭887722ADNOT TRUE
⊮887822AEDOES NOT FORCE
⊯887922AFNEGATED DOUBLE VERTICAL BAR DOUBLE RIGHT TURNSTILE
⊰888022B0PRECEDES UNDER RELATION
⊱888122B1SUCCEEDS UNDER RELATION
⊲888222B2NORMAL SUBGROUP OF
⊳888322B3CONTAINS AS NORMAL SUBGROUP
⊴888422B4NORMAL SUBGROUP OF OR EQUAL TO
⊵888522B5CONTAINS AS NORMAL SUBGROUP OR EQUAL TO
⊶888622B6ORIGINAL OF
⊷888722B7IMAGE OF
⊸888822B8MULTIMAP
⊹888922B9HERMITIAN CONJUGATE MATRIX
⊺889022BAINTERCALATE
⊻889122BBXOR
⊼889222BCNAND
⊽889322BDNOR
⊾889422BERIGHT ANGLE WITH ARC
⊿889522BFRIGHT TRIANGLE
⋀889622C0N-ARY LOGICAL AND
⋁889722C1N-ARY LOGICAL OR
⋂889822C2N-ARY INTERSECTION
⋃889922C3N-ARY UNION
⋄890022C4DIAMOND OPERATOR
⋅890122C5&sdot;DOT OPERATOR
⋆890222C6STAR OPERATOR
⋇890322C7DIVISION TIMES
⋈890422C8BOWTIE
⋉890522C9LEFT NORMAL FACTOR SEMIDIRECT PRODUCT
⋊890622CARIGHT NORMAL FACTOR SEMIDIRECT PRODUCT
⋋890722CBLEFT SEMIDIRECT PRODUCT
⋌890822CCRIGHT SEMIDIRECT PRODUCT
⋍890922CDREVERSED TILDE EQUALS
⋎891022CECURLY LOGICAL OR
⋏891122CFCURLY LOGICAL AND
⋐891222D0DOUBLE SUBSET
⋑891322D1DOUBLE SUPERSET
⋒891422D2DOUBLE INTERSECTION
⋓891522D3DOUBLE UNION
⋔891622D4PITCHFORK
⋕891722D5EQUAL AND PARALLEL TO
⋖891822D6LESS-THAN WITH DOT
⋗891922D7GREATER-THAN WITH DOT
⋘892022D8VERY MUCH LESS-THAN
⋙892122D9VERY MUCH GREATER-THAN
⋚892222DALESS-THAN EQUAL TO OR GREATER-THAN
⋛892322DBGREATER-THAN EQUAL TO OR LESS-THAN
⋜892422DCEQUAL TO OR LESS-THAN
⋝892522DDEQUAL TO OR GREATER-THAN
⋞892622DEEQUAL TO OR PRECEDES
⋟892722DFEQUAL TO OR SUCCEEDS
⋠892822E0DOES NOT PRECEDE OR EQUAL
⋡892922E1DOES NOT SUCCEED OR EQUAL
⋢893022E2NOT SQUARE IMAGE OF OR EQUAL TO
⋣893122E3NOT SQUARE ORIGINAL OF OR EQUAL TO
⋤893222E4SQUARE IMAGE OF OR NOT EQUAL TO
⋥893322E5SQUARE ORIGINAL OF OR NOT EQUAL TO
⋦893422E6LESS-THAN BUT NOT EQUIVALENT TO
⋧893522E7GREATER-THAN BUT NOT EQUIVALENT TO
⋨893622E8PRECEDES BUT NOT EQUIVALENT TO
⋩893722E9SUCCEEDS BUT NOT EQUIVALENT TO
⋪893822EANOT NORMAL SUBGROUP OF
⋫893922EBDOES NOT CONTAIN AS NORMAL SUBGROUP
⋬894022ECNOT NORMAL SUBGROUP OF OR EQUAL TO
⋭894122EDDOES NOT CONTAIN AS NORMAL SUBGROUP OR EQUAL
⋮894222EEVERTICAL ELLIPSIS
⋯894322EFMIDLINE HORIZONTAL ELLIPSIS
⋰894422F0UP RIGHT DIAGONAL ELLIPSIS
⋱894522F1DOWN RIGHT DIAGONAL ELLIPSIS
⋲894622F2ELEMENT OF WITH LONG HORIZONTAL STROKE
⋳894722F3ELEMENT OF WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋴894822F4SMALL ELEMENT OF WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋵894922F5ELEMENT OF WITH DOT ABOVE
⋶895022F6ELEMENT OF WITH OVERBAR
⋷895122F7SMALL ELEMENT OF WITH OVERBAR
⋸895222F8ELEMENT OF WITH UNDERBAR
⋹895322F9ELEMENT OF WITH TWO HORIZONTAL STROKES
⋺895422FACONTAINS WITH LONG HORIZONTAL STROKE
⋻895522FBCONTAINS WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋼895622FCSMALL CONTAINS WITH VERTICAL BAR AT END OF HORIZONTAL STROKE
⋽895722FDCONTAINS WITH OVERBAR
⋾895822FESMALL CONTAINS WITH OVERBAR
⋿895922FFZ 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
32space
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
160no-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
182pilcrow 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

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 .



 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>

 
 

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

7 Responses to "Belajar HTML"

  1. thisisasf2 Maret 2020 pukul 04.19

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. thisisasf2 Maret 2020 pukul 04.44

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. thisisasf2 Maret 2020 pukul 04.49

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. thisisasf2 Maret 2020 pukul 04.55

    Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. thisisasf2 Maret 2020 pukul 07.46

    Terima kasih bang atas materi-nya. Dengan ini saya sangat terbantu dalam mengerjakan tugas kuliah saya.
    Perkenalkan Nama Saya adalah Muhamad Asfarezhan, NIM saya adalah 1922500056. Kunjungi website kampus saya ya https://www.atmaluhur.ac.id

    BalasHapus
  6. Anonim26 Maret 2022 pukul 23.01

    Belajar Html >>>>> Download Now

    >>>>> Download Full

    Belajar Html >>>>> Download LINK

    >>>>> Download Now

    Belajar Html >>>>> Download Full

    >>>>> Download LINK

    BalasHapus
  7. Anonim26 Maret 2022 pukul 23.01

    Belajar Html >>>>> Download Now

    >>>>> Download Full

    Belajar Html >>>>> Download LINK

    >>>>> Download Now

    Belajar Html >>>>> Download Full

    >>>>> Download LINK lb

    BalasHapus

Langganan: Posting Komentar (Atom)