HTML (Codingku.com)
70
HTML Mukadimah « Halaman Utama Next » Selamat datang di codingku HTML tutorial, disini anda akan belajar HTML dimulai dari dasar hingga tingkatan mahir sehingga nantinya anda bisa membuat website sendiri, mungkin membuat website seperti codingku ini misalnya :) . HTML bisa dikatakan merupakan inti dari halaman web, sebelum anda beranjak ke tutorial-tutorial yang lain sebaiknya anda kuasai dulu dasar-dasar dari HTML. Pengertian HTML : HTML merupakan singkatan dari HyperText Markup Language. HTML bukanlah sebuah bahasa pemrograman. HTML digunakan untuk menyebarkan informasi secara global. HTML sangat sulit mudah untuk dipelajari, anda akan membencinya menyukainya :) . Mulai belajar HTML sekarang!
-
Upload
risma-yanti -
Category
Documents
-
view
162 -
download
0
description
1
Transcript of HTML (Codingku.com)
HTML Mukadimah« Halaman UtamaNext »
Selamat datang di codingku HTML tutorial, disini anda akan belajar HTML dimulai dari dasar hingga tingkatan mahir sehingga nantinya anda bisa membuat website sendiri, mungkin membuat website seperti codingku ini misalnya :) .
HTML bisa dikatakan merupakan inti dari halaman web, sebelum anda beranjak ke tutorial-tutorial yang lain sebaiknya anda kuasai dulu dasar-dasar dari HTML.
Pengertian HTML :
HTML merupakan singkatan dari HyperText Markup Language. HTML bukanlah sebuah bahasa pemrograman. HTML digunakan untuk menyebarkan informasi secara global.
HTML sangat sulit mudah untuk dipelajari, anda akan membencinya menyukainya :) .
Mulai belajar HTML sekarang!
Contoh-contoh pada setiap bab
Agar lebih mudah untuk belajar HTML maka kami menyediakan HTML editor dengan harapan anda dapat langsung mencoba apa yang sudah anda pelajari, anda bisa mengubah kode dan mencoba hasilnya sendiri.
Codingku HTML Editori<html>
<body>
Isi dari websiteku
</body>
</html>
HTML Pengenalan« PrevNext »
Ingat, pengertian HTML :
HTML merupakan singkatan dari HyperText Markup Language. HTML bukanlah sebuah bahasa pemrograman. HTML digunakan untuk menyebarkan informasi secara global.
Oke, kita mulai perkenalan dengan HTML ini dengan sebuah contoh sederhana berikut :Codingku HTML Editori<html>
<body>
Isi dari websiteku
</body>
</html>
Coba sendiri »
Penjelasan :
Isi tulisan di antara <html> dan </html> mendeskripsikan isi dari sebuah halaman web.
Isi tulisan di antara <body> dan </body> mendeskripsikan isi dari sebuah halaman web yang terlihat.
HTML tags
Apa yang dimaksud dengan HTML tags?
HTML tags adalah sebuah label yang di awali dengan tanda '<' dan di akhiri dgn tanda '>' :
<html> <title> <body>
Pada umumnya HTML tags adalah berpasangan:
<body> dengan </body> <h2> dengan </h2> <p> dengan </p>
Akan tetapi ada beberapa tags yang juga disebut sebagai 'empty element' dapat berjalan tanpa berpasangan:
<img> <input>
HTML Elements
HTML elements sering disamakan dengan HTML tags meskipun keduanya hampir sama akan tetapi pada dasarnya mereka berbeda.
HTML elements adalah semua bagian dari dimulainya sebuah tag hingga penutup dari tag termasuk didalamnya tag-nya tersebut.
HTML Instalasi« Prev
Next »
Kami menyediakan HTML editor di codingku untuk memudahkan anda yang ingin mencoba dan berlatih HTML :
Codingku HTML Editori
<html>
<body>
Isi dari websiteku
</body>
</html>
Coba sendiri »
Lantas bagaimana bila anda ingin mencoba HTML sendiri tanpa editor yang telah kami sediakan?
Berikut ini adalah beberapa hal yang anda perlukan untuk mencoba HTML sendiri di komputer anda :
Teks Editor, mis : notepad. Browser, mis : Internet Explorer, FireFox, Opera, Google Chrome, dsb.
Langkah-langkah
1. Buka notepad (Windows)
2. Misalkan kita akan membuat sebuah halaman HTML dengan kode sebagai berikut :
<html>
<head>
<title>Judul Websiteku</title>
</head>
<body>
Isi dari websiteku
</body>
</html>
3. Copy dan paste kode di atas ke notepad
4. Kemudian simpan dan ganti *.txt dengan coba.html seperti gambar berikut :
5. Buka file yang sudah tersimpan tersebut
6. Selamat anda telah membuat sebuah halaman web pertama anda :)
HTML Elemen« PrevNext »
HTML Element
Ketika anda membuka sebuah halaman web dan anda melihat semua yang ada di hadapan anda, mulai dari sebuah paragraf, banner dan link-link navigasi... itulah elemen-elemen dari sebuah halaman web.
Sebuah elemen terdiri dari tiga buah bagian penting :
Tag pembuka Isi Tag penutup
Berikut adalah sebuah elemen paragraf HTML yang lengkap :
<p>isi elemen</p>
Satu halaman sebuah web bisa mengandung ratusan hingga ribuan elemen HTML.
Beberapa contoh elemen-elemen HTML yang lain :<html></html><body></body>
<h1></h1>
Nested HTML
Nested HTML adalah sebuah elemen yang berada di dalam elemen HTML lainnya.<body><h1>hallo</h1></body>
Dokumen HTML
<html>
<title>Judulku</title>
<body>
<p>Paragrafku</p>
</body>
</html>
Pada contoh di atas terdapat empat elemen HTML
Elemen <p> :
<p> merupakan paragraf elemen Elemen ini dibuka dengan <p> dan di tutup dengan </p> Isi dari elemen ini adalah 'Paragrafku'
Elemen <body> :
<body> merupakan elemen isi atau badan dari sebuah dokumen HTML Elemen ini dibuka dengan <body> dan di tutup dengan </body> Elemen ini memiliki sebuah nested elemen yaitu elemen <p> beserta isinya
Elemen <title> :
<title> merupakan elemen yang mendefinisikan judul dari sebuah dokumen HTML Elemen ini dibuka dengan <title> dan di tutup dengan </title> Isi dari elemen ini adalah 'Judulku'
Elemen <html> :
<html> merupakan elemen yang mendefiniskan seluruh bagian dari sebuah dokumen HTML
Elemen ini dibuka dengan <html> dan di tutup dengan </html> Elemen ini memiliki tiga nested elemen lainnya, yaitu :<title>,<body> dan <p>
Selalu ingat agar menutup setiap elemen dengan tag penutup
<p>Paragraf 1<p>Paragraf 2
Contoh di atas mungkin bisa berjalan di banyak browser karena penutup dari elemen dianggap sebagai opsional, tetapi sebaiknya hal ini jangan anda biasakan sebab banyak elemen-elemen HTML yang bisa mengakibatkan error bila tidak terdapat tag penutup di dalamnya.
Case sensitive
HTML tag tidaklah case sensitive, jadi tidak akan bermasalah meskipun anda menuliskannya dengan huruf besar maupun kecil. <html> -> <HTML>.
Akan tetapi kami sarankan agar anda menggunakan lowercase / huruf kecil sebab World Wide Web Consorsium (W3C) menyarankan agar menggunakan lowercase untuk setiap elemen HTML 4 dan mengharuskan menggunakannya pada XML
HTML Title« Prev
Next »
Elemen <Title> digunakan untuk menyatakan judul sebuah halaman web. Posisinya berada di dalam elemen <head>.
<html>
<head>
<title>Judul Halaman websiteku</title>
</head>
<body>
Isi dari halaman websiteku
</body>
</html>
Untuk mengetahui hasil dari kode di atas silahkan klik disini
Tulisan di dalam <title> tidak akan terlihat di browser, tapi beberapa browser menampilkannya di bagian atas window dari browser.
Jangan bingung membedakan title dan heading/header , keduanya adalah berbeda meskipun biasanya orang menuliskan isi yang sama pada keduanya. Jadi, title adalah hal pertama dalam sebuah dokumen HTML, berbeda tag dan fungsi.
Search engine seperti Altavista, Infoseek dan Webcrawler menggunakan isi dari <title> sebuah halaman ketika mereka mengambil informasi dari halaman web.
Horizontal Line
Horizontal line / garis horisontal / garis datar dalam HTML didefinisikan dengan tag <hr>
Codingku HTML Editori
<p> Jakarta </p>
<hr>
<p> Malang </p>
<hr>
<p> Surabaya </p>
Coba sendiri »
Elemen <hr> merupakan 'empty element', jadi tidak memerlukan tag penutup.
HTML Komentar
« Prev
Next »
Sebelum kita melangkah lebih jauh kami akan mengenalkan kepada anda mengenai konsep dari HTML komentar/comment.
Meskipun 'komentar' sifatnya adalah opsional namun ada kalanya pemberian 'komentar' akan sangat membantu anda.
Komentar adalah bagian dari kode HTML, tujuannya adalah untuk menjelaskan bagian-bagian dari kode.
Contoh syntax dari sebuah komentar HTML :
<!-- isi dari komentar HTML -->
Komentar HTML selalu dimulai dengan <!> dan diakhiri dengan >> , hal ini memberitahukan kepada browser darimana sebuah komentar dimulai dan diakhiri.
Contoh penggunaannya :
Codingku HTML Editori
<html>
<body>
<!-- ini adalah heading Bab A --> <h3> Jakarta </h3>
</body>
</html>
Coba sendiri »
Pemberian komentar tidak hanya sangat berguna bagi coders lain yang ingin memahami kode HTML buatan anda namun juga bagi anda sendiri, misalkan bila anda sudah lama tidak mengubah-ubah kode anda dan ingin kembali mengeditnya.
Komentar tidak akan ditampilkan di browser anda, jadi pemberian komentar hanya ditujukan bagi coders.
Multi Komentar
Berikut adalah contoh penerapan multi komentar di HTML
<!-- Ini adalah multi komentar di HTML -->
Komentar Error
Ada kalanya kita salah menuliskan komentar, misalnya :
< !-- contoh komentar yang salah -->
HTML Paragraf« Prev
Next »
Tag <p> mendefinisikan sebuah paragraf.
Dengan menggunakan tag ini, maka browser secara otomatis akan memasukkan garis/space kosong di bagian atas dan bawah paragraf.
Codingku HTML Editori
<p>Paragraf pertamaku</p>
<p>Paragraf keduaku</p>
<p>Paragraf ketigaku</p>
Coba sendiri »
Codingku HTML Editori
<p> paragraf pertamaku
<p> paragraf keduaku
Coba sendiri »
Seperti yang bisa anda lihat pada contoh kedua di atas, elemen <p> tetap bisa berjalan tanpa adanya tag penutup <p/>
Tag penutup pada beberapa elemen memang di anggap opsional oleh browser akan tetapi sebaiknya anda membiasakan untuk tetap memakai penutup. Sebab banyak elemen-elemen lain dalam HTML yang bisa berakibat error bila tidak terdapat tag penutup di dalamnya.
Dalam XHTML dan XML, elemen tanpa tag penutup tidak diperbolehkan.
Line Break
Bila anda ingin baris baru(new line) anda dapat menggunakan tag <br/> break .
Codingku HTML Editori
Ini baris pertama <br/>
Ini baris kedua <br/>
ini baris ketiga
Coba sendiri »
<br> termasuk salah satu dari 'empty element', jadi tidak memerlukan tag penutup.
Sebaiknya memakai <br> ataukah <br/> ?
Meskipun menulis tag line break dengan <br> bekerja di semua browser akan tetapi sebaiknya menuliskannya dengan <br/> sebab bekerja lebih baik di aplikasi XHTML dan XML.
HTML Format« Prev
Next »
HTML memiliki banyak tag-tag lain yang berfungsi untuk mengubah sebuah tulisan.
Tulisan ini bold
Tulisan ini italic
Tulisan ini strike
Tulisan ini strong
Tulisan ini emphasized
Tulisan ini code/computer
Tulisan ini subscript dan superscript
source code contoh di atas :
Codingku HTML Editori
<p><b>Tulisan ini bold</b></p>
<p><i>Tulisan ini italic</i></p>
<p><strike>Tulisan ini strike</strike></p>
<p><strong>Tulisan ini strong</strong></p>
<p><em>Tulisan ini emphasized</em></p>
<p><code>Tulisan ini code/computer</code></p>
<p>Tulisan ini <sub>subscript</sub> dan <sup>superscript</sup></p>
Coba sendiri »
<i> dan <em> juga <b> dan <strong> meskipun keduanya sama-sama menampilkan hasil tulisan yang sama akan tetapi pada dasarnya keduanya berbeda. <i> untuk hasil tulisan italic<b> untuk hasil tulisan bold
Sedangkan <em> dan <strong> bertujuan untuk menampilkan tulisan dimana kita ingin user melihat tulisan atau kata itu sebagai hal yang penting. Saat ini hampir semua browser me-render <em> sebagai italic dan <strong> sebagai bold.
Bila suatu saat browser menetapkan bahwa <em> dan <strong> sebagai tulisan berwarna hijau
maka itu bisa saja terjadi, yang penting anda tahu kalau <em> bukanlah italic dan <strong> bukanlah bold.
HTML List« PrevNext »
Anak Pak Raden :
Budi Wati Joni
Urutan anak Pak Raden :
1. Budi2. Wati3. Joni
Dengan HTML <ul> "unordered list" dan <ol> "ordered list" anda bisa membuat daftar seperti di atas.
Berikut adalah kode dari tampilan di atas :Codingku HTML Editori<p>Anak Pak Raden :</p> <ul> <li>Budi</li> <li>Wati</li> <li>Joni</li> </ul>
<p>Urutan anak Pak Raden :</p> <ol> <li>Budi</li> <li>Wati</li> <li>Joni</li> </ol>
Coba sendiri »
Unordered List :
Unordered list dimulai dengan tag <ul> Setiap item di dalam <ul> dimulai dengan <li>
Ordered List :
Unordered list dimulai dengan tag <ol> Setiap item di dalam <ol> dimulai dengan <li>
Definition List
Definition List adalah sebuah list yang terdapat deskripsi pada setiap item-nya.
Tag <dd> adalah tag dari definition List dengan tag <dt> sebagai deskripsi itemnya.Codingku HTML Editori<dl> <dt>Wati</dt> <dd>- Wati berasal dari Jakarta</dd> <dt>Budi</dt> <dd>- Budi berasal dari Surabaya</dd> <dt>Joni</dt> <dd>- Joni berasal dari Medan</dd> </dl>
Coba sendiri »
Pada setiap item yang ada anda bisa menambahkan line break, text format, gambar, dsb.
HTML Attribut« PrevNext »
HTML Attribute
Elemen HTML bisa memiliki atribut di dalamnya. Atribut memberikan informasi tambahan terhadap sebuah elemen. Atribut selalu ditempatkan di tag pembuka sebuah elemen. Atribut berisi nama dan nilai di dalamnya mis: color="red".
Contoh Attribute
Ok, tanpa basa-basi lebih jauh lagi kita lihat contoh berikut :
Paragraf 1
Paragraf 2
Paragraf 3
Seperti anda lihat, teks paragraf di atas memiliki posisi yang berbeda-beda, hal itu terjadi karena penambahan attribut ke dalam tag <p>
Codingku HTML Editori<p align="right">Paragraf 1</p> <p align="center">Paragraf 2</p> <p align="left">Paragraf 3</p>
Coba sendiri »
Selalu isikan nilai atribut dengan tanda petik
Nilai dari atribut harus selalu di isikan dengan tanda petik, mis align="center".
Memakai tanda satu petik ' maupun tanda dua petik " tidaklah bermasalah.Pada sebuah situasi yang langka,ketika isi dari atribut itu sendiri memiliki tanda petik maka petik terluar bisa di isi dengan satu petik dan nested/dalamnya bisa di isi dengan tanda dua petik dan sebaliknya, mis :
value = ' Si "Buta" dari "Goa Hantu" .'
Gunakan lowercase dalam menulis attribut
Menuliskan attribut dengan huruf besar maupun kecil bukanlah masalah, namun World Wide Web Consorsium menganjurkan untuk menuliskan attribut pada HTML 4.0.
Versi terbaru dari (X)HTML mengharuskan anda untuk menuliskan attribut dengan huruf kecil.
HTML Links« Prev
Next »
HTML links
HTML links atau hyperlinks adalah sebuah kumpulan tulisan yang bisa anda klik untuk menuju ke halaman web yang lain.
Beberapa contoh :
Tulisan ini bila di klik maka akan menuju ke halaman utama codingku.com Tulisan ini bila di klik maka akan membuka halaman baru ke google Tulisan Ini bila di klik maka akan membuka halaman baru ke world wide web consorsium
(W3C)
Syntax dari HTML Links
<a href="http://codingku.com">Tulisan ini akan di tampilkan</a>
<a> : adalah tag pembuka dari elemen links. href : mendefinisikan alamat url dari halaman yang akan dituju.
Attribut target dari HTML Links
<a href="http://www.codingku.com" target="_blank>Tulisan ini yang akan ditampilkan dan link ini akan membuka halaman di window yang baru </a>
target : memberikan pilihan dimana link dari url di dalamnya di buka. Bila di isi "_blank" : maka link tersebut akan membuka halaman baru. Bila di isi/set dengan "_parent" atau "_top" : maka link akan dibuka di window browser yang
sama. Bila di isi dengan "_self" maka link akan dibuka di halaman yg sedang dibuka. Secara default : attribut ini berisi "_self".
Link terhadap bagian dari suatu dokumen HTML
<a href="#top">klik untuk menuju ke atas</a>
Judul halaman ini adalah <h2 name="top">HTML Links</h2>, kemudian perhatikan hasil dari kode di atas ini.
HTML Gambar« PrevNext »
HTML Image
Tag <img> digunakan untuk menampilkan gambar pada dokumen HTML.
Tag <img> termasuk salah satu dari empty element, maksudnya memiliki attribut tetapi tidak memiliki tag penutup.
Browser menampilkan gambar anda berdasarkan letak tag <img> di dokumen HTML anda.
Syntax dari HTML image
<img src='url'/>
Penjelasan :
<img> adalah tag pembuka. src adalah attribut yang digunakan sebagai informasi darimana url letak gambar yang
akan ditampilkan tersimpan.
Codingku HTML Editori<!DOCTYPE html>
<html>
<body>
<img src="http://codingku.com/html/sample/street-fighter-4.jpg" />
</body>
</html>
Coba sendiri »
Attribut alt pada HTML image
Attribut alt digunakan untuk menggantikan gambar dengan pesan teks bila gambar tidak bisa ditampilkan.<img src="http://codingku.com/html/sample/street-fighter.jpg" alt="Gambar Ryu" />
* tulisan keluar di browser firefox dan tidak keluar di chrome.
Menentukan tinggi dan panjang gambar
Untuk menentukan lebar dan panjang sebuah gambar maka perlu ditambahkan attribut width dan height pada tag img
<img src="http://codingku.com/html/sample/street-fighter.jpg" width="400" height="300" />
Sebuah kebiasan yang baik bila kita menentukan dari awal besar image dengan menuliskan attribut width dan height-nya sebab dengan begitu space/ruang kosong untuk image sudah diketahui dulu oleh browser. Bila browser tidak mengetahui ukuran dari image maka ketika sebuah halaman dibuka akan kita lihat sebuah layout yang berubah-ubah menunggu load dari image selesai.
Sebaiknya penggunaan gambar diminimalkan sebab file gambar/image biasanya merupakan file yang berukuran besar sehingga akan membuat lambat akses terhadap website anda.
HTML Table« PrevNext »
Tiga hal penting dari tabel adalah :
Tag pembuka tabel : <table> Tag row : <tr> Tag data : <td>
Ok, dengan hal tersebut tertanam di pikiran kita, kita coba membuat sebuah tabel:Jono BudiWati Anjas
Source code dari kode di atas :
Codingku HTML Editori<table> <tr><td> Jono </td> <td> Budi </td></tr> <tr><td> Wati </td> <td> Anjas </td></tr> </table>
Coba sendiri » Perhatikan, dari contoh di atas anda bisa mengetahui berapa lajur /<tr> dan kolom/<td> dari tabel tersebut
Table Border
Kita buat contoh tabel yang lain :Jono BudiWati Anjas
Dengan menambahkan attribut border = "1" maka akan kita dapatkah hasil seperti di atas.
Codingku HTML Editori<table border="1"> <tr><td> Jono </td> <td> Budi </td></tr> <tr><td> Wati </td> <td> Anjas </td></tr> </table>
Coba sendiri »
Tabel dengan border berwarna :Jono Budi
Wati Anjas
Dengan menambahkan bordercolor="red" kita akan mendapatkan border tabel berwarna merah.
Codingku HTML Editori<table border="1" bordercolor="red"> <tr><td> Jono </td> <td> Budi </td></tr> <tr><td> Wati </td> <td> Anjas </td></tr> </table>
Coba sendiri »
Table Header
Informasi dari kepala tabel di definisikan dengan tag "<th>", semua browser utama menampilkan isi dari <th> dengan bold dan centered.
A B
Jono Budi
Wati Anjas
Source code :
Codingku HTML Editori<table border="1" bordercolor="red"> <tr><th> A </th> <th> B </th></tr> <tr><td> Jono </td> <td> Budi </td></tr> <tr><td> Wati </td> <td> Anjas </td></tr> </table>
HTML Css« Prev
Next »
CSS atau Cascading Style Sheets
CSS digunakan untuk memberikan berbagai macam style pada elemen HTML. CSS bisa dideklarasikan dengan tiga cara :
o Inline : Di deklarasikan ke dalam attribut elemen HTML. o Internal : Di deklarasikan menggunakan elemen <style> di dalam elemen <head>. o External : Di deklarasikan pada sebuah file terpisah.
Contoh CSS
Pada paragraf ini terdapat inline CSS.
Pada paragraf menggunakan font family 'cursive'.
Pada paragraf menggunakan font family 'monospace'.
Pada paragraf menggunakan font family 'sans-serif'.
Codingku HTML Editori
<p style="color:#FF33FF; text-decoration:underline; font-size:13px;"> Pada paragraf ini terdapat inline CSS. </p>
<p style="font-size:16px; font-family:cursive"> Pada paragraf menggunakan font family 'cursive'. </p>
<p style="font-size:19px; font-family:monospace"> Pada paragraf menggunakan font family 'monospace'. </p>
<p style="font-size:19px; color:#FF3333; font-family:sans-serif"> Pada paragraf menggunakan font family 'sans-serif'. </p>
Coba sendiri »
Mengenai CSS
CSS diperkenalkan bersamaan dengan HTML 4.0.
Cara terbaik dari desain sebuah CSS adalah dengan menempatkan CSS pada file yang terpisah atau disebut dengan eksternal CSS.
Namu kami tidak akan membahas itu pada halaman ini, bila anda ingin mengentahui CSS yang lebih detail silahkan kunjungi halaman tutorial CSS kami.
Internal CSS
Internal CSS di deklarasikan di bagian elemen <head> pada suatu dokumen HTML.
Internal CSS akan mempengaruhi semua elemen dibawahnya yang sesuai dengan yang di deklarasikannya.
misal :
<style> p{color:green} </style></head>
Pada contoh di atas,p{color:green} akan mempengaruhi semua elemen <p>... </p> di dalam dokumen tersebut.
Contoh internal CSS :
Codingku HTML Editori
<html>
<head>
<style>
h2{color:#33FFFF; text-decoration:underline;}
p{color:red; font-family:cursive; font-size:15px;}
</style>
</head>
<body>
<h2>Style heading ini dibuat dengan internal CSS. </h2>
<p>Style paragraf ini dibuat dengan internal CSS. </p>
</body>
</html>
Coba sendiri » Bila anda sudah menguasai dasar dari CSS, maka sebaiknya hindarilah penggunaan elemen <strike>, <font> maupun <center>.
HTML Warna« PrevNext »
Colors / Warna merupakan elemen penting pada dokumen HTML.
Metode pemberian warna pada HTML Colors
Berikut adalah tiga metode yang bisa digunakan untuk memberikan warna pada elemen HTML :
Color Names/Nama : Anda bisa secara langsung memberikan nama semisal : "red","green",dll.
Hex Code : 6 digit angka hexadecimal merepsentasikan warna dari red,green dan blue/merah, hijau dan biru.
Color decimal / Prosentase : Nilai ini menggunakan properti rgb( ).
Codingku HTML Editori<body bgcolor='rgb(250, 250, 250)'>
<table border="1" cellpadding="5" >
<tr><td bgcolor="#FF0FF0" width="100" height="100"</td></tr>
<tr><td bgcolor="red" width="100" height="100"></td></tr>
</table>
</body>
Coba sendiri »
Standard warna dari World Wide Web Consorsium (W3C) :
Berikut adalah nama-nama warna :
Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
Berikut adalah code hexadesimal dari warna:
Color Color HEX
#000000
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#C0C0C0
#FFFFFF
Warna yang aman bagi Web?
Beberapa tahun lalu, ketika sebuah komputer hanya mampu mendukung maksimal 256 colors, sebuah daftar 216 "Web Safe Colors" ditetapkan sebagai standard dari web.
Tetapi itu bukanlah sebuah masalah sekarang, sebab seiring dengan kecanggihan komputer saat ini yg bisa menghasilkan jutaan warna, bagaimanapun juga berikut adalah daftar dari 126 "Web Safe Colors" :
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
Contoh
Pada tag <body> memiliki beberapa attribut yang bisa digunakan untuk menetapkan warna-warna yang berbeda :
bgcolor : Menetapkan warna background dari dokumen HTML. text : Menetapkan warna dari teks pada elemen body. alink : Menetapkan warna pada link yang aktif. link : Menetapkan warna pada link. vlink : Menetapkan warna pada link yang telah dikunjungi
Codingku HTML Editori<html>
<body bgcolor="red" text="white">
<h2>Warna background</h2>
</body>
</html>
Coba sendiri »
HTML Background« Prev
Next »
HTML Background
HTML Background dibagi menjadi dua :
HTML Background dengan color/warna. HTML Background dengan image/gambar.
HTML Background dengan warna
Misalkan kita memiliki kita ingin memberikan background warna pada elemen tabel :
<table><tr><td width="100" height="100"></td></tr>
</table>
Maka kita tambahkan attribut bgcolor="red" pada tag seperti berikut :
<table bgcolor="red"><tr><td width="100" height="100"></td></tr></table>
Buktikan sendiri :
Codingku HTML Editori
<table bgcolor="red"> <tr>
<td width="100" height="100"> </td> </tr> </table>
Coba sendiri »
Dengan CSS :
Kita tambahkan style="background-color:red" pada tag pembuka table.
<table style="background-color:red"><tr><td width="100" height="100"></td></tr></table>
Buktikan sendiri :
Codingku HTML Editori
<table style="background-color:red"> <tr> <td width="100" height="100"> </td> </tr> </table>
Coba sendiri »
HTML Background Image
Kita tetap akan menggunakan kode seperti di atas.
Tanpa CSS
Kita tambahkah dalam tag <table> dengan background:"http://codingku.com/html/img/pattern.gif"
<table background="http://codingku.com/html/img/pattern.gif"><tr><td width="100" height="100"></td></tr></table>
Codingku HTML Editori
<table background="http://codingku.com/html/img/pattern.gif"> <tr> <td width="100" height="100"> </td> </tr> </table>
Coba sendiri »
Dengan CSS<table style="background-image:url('http://codingku.com/html/img/pattern.gif')"><tr><td width="100" height="100"></td></tr></table>
Buktikah :
Codingku HTML Editori
<table style="background-image:url('http://codingku.com/html/img/pattern.gif')"> <tr> <td width="100" height="100"> </td> </tr> </table>
Coba sendiri »
HTML Form« PrevNext »
HTML Form digunakan untuk mengirimkan data ke server
HTML Form bisa mengandung elemen-elemen input semisal text fields, button, submit-buttons, check-box dan lain sebagainya.
Tag <form> digunakan untuk mendeklarasikan HTML form.<form>..
elemen2 input..</form>
Text Fields
<input type="text"> mendefinisikan sebuah teks input yang bisa diisi oleh user.
<form>Nama Anda : <input type="text" name="nama"></form>
Kode HTML di atas akan terlihat seperti berikut di browser :
Nama Anda :
Form sendiri tidak akan terlihat di Browser.Secara default panjang/width dari input text adalah sebesar 20 karakter.
Password Fields
<input type="password"> mendefinisikan sebuah teks input yang bisa diisi oleh user.
<form>Password Anda : <input type="password" name="password"></form>
Kode HTML di atas akan terlihat seperti berikut di browser :
Password Anda :
Radio Buttons
<input type="radio"> mendefinisikan sebuah input pilihan yang bernilai salah satu.
<form><input type="radio" name="sex" value="laki" /> laki-laki<input type="radio" name="sex" value="perempuan" /> perempuan</form>
Kode HTML di atas akan terlihat seperti berikut di browser :
Laki-laki
Perempuan
Check Boxes
<input type="checkbox"> mendefinisikan input pilihan yang bisa bernilai semuanya/banyak.
<form><input type="checkbox" name="city" value="surabaya"/>Surabaya<br/><input type="checkbox" name="city" value="bali" /> Bali
Kode HTML di atas akan terlihat seperti berikut di browser :
Surabaya
Bali
Submit Button
Submit Button digunakan untuk mengirimkan data ke server. Data dikirim ke sebuah halaman yg di deklarasikan pada atribut milik form. <input type="submit"> mendefinisikan input pilihan yang bisa bernilai
semuanya/banyak.
<form method="GET" action="http://codingku.com/html/sample/form.php>Nama anda : <input type="text" name="nama" /> <input type="submit" value="submit" /></form>
Kode HTML di atas akan terlihat seperti berikut di browser :
Nama anda :
Bila anda perhatikan kode HTML di atas, pada tag <form> terdapat atribut action, isi dari action inilah yg mendefinisikan tujuan dari submit.
HTML Block« Prev
Next »
Sebagian besar elemen HTML didefinisikan dengan block level dan inline level elemen.
Elemen Block Level
Umumnya elemen ini akan dimulai dan diakhiri dengan baris baru,
misalnya: <h1>, <p>, <table>, <ul>.
Elemen Inline Level
Umumnya elemen ini ditampilkan tanpa harus memulai sebuah baris baru,
misalnya : <b>, <i>, <a>.
Elemen HTML <div>
HTML <div> adalah elemen block level yang bisa mengandung elemen-elemen lain di dalamnya.
HTML <div> tidak mengandung fungsi-fungsi spesial selain bahwasanya browser akan menampilkan elemen ini dimulai dan di akhiri dengan baris baru.
Bila digunakan bersamaan dengan CSS, elemen div sangatlah membantu untuk memberikan style elemen-elemen di dalamnya.
Codingku HTML Editori
<div style="font-size:45px"><p>Dari Bandung ke Surabaya</p></div>
Coba sendiri »
Elemen div sekarang banyak digunakan sebagai layout sebuah halaman web menggantikan cara lama menggunakan tabel.Sebab layout dengan menggunakan tabel tidaklah benar, karena fungsi tabel ditujukan untuk menampilkan data tabular.
Elemen HTML <span>
HTML <span> merupakan inline level element.
HTML <span> tidak memiliki arti yang khusus.
HTML <span> bila digabungkan dengan CSS maka bisa sangat berguna untu mengubah style dari text.
Codingku HTML Editori
<p>Tulisan ini memakai <span style="color:green">span</span> didalamnya</p>
Coba sendiri »
HTML Iframe« PrevNext »
Iframe HTML
tag : <iframe> Elemen iframe digunakan untuk menampilkan sebuah halaman web di dalam sebuah
halaman web. Lihat :
iframe syntax
<iframe src="url"></iframe>
Contoh iframe :
Codingku HTML Editori<iframe src="http://codingku.com" width="200" height="200"></iframe>
Coba sendiri »
HTML Embed« PrevNext »
Anda bisa menampilkan audio dan video dengan elemen HTML "embed".
<embed> merupakan tag dari HTML embed.
Contoh HTML embed
Berikut adalah contoh sederhana penggunaan elemen ini untuk memainkan file audio berformat midi.
Codingku HTML Editori<embed src="http://codingku.com/html/sample/fall.mid" width="100%" height="60" >
<noembed><img src="yourimage.gif" ></noembed> </embed>
Coba sendiri »
HTML - Tipe-tipe media Video
Tag <embed> mendukung tipe-tipe berikut :
.swf adalah file yang dibuat dengan macromedia flash. .wmv adalah file format dari Windows Media Video. .mov adalah file format dari Quick Time milik Apple. .mpeg adalah file format yang dibuat oleh Moving Pictures Expert Group.
HTML Youtube« PrevNext »
Menampilkan Youtube
Cara termudah untuk menampilkan video pada halaman web anda adalah dengan menggunakan youtube.
Misal kita memiliki link youtube video sebagai berikut :
http://www.youtube.com/watch?v=XkUtEJtV46U
Maka kita bisa menampilkannya dengan dua cara :
Iframe, dan Embed
Dengan HTML Iframe
Source code :
Codingku HTML Editori<iframe width="420" height="345" src="http://www.youtube.com/embed/XkUtEJtV46U"> </iframe>
Coba sendiri »
Dengan Embed
source code :Codingku HTML Editori<iframe width="420" height="345" src="http://www.youtube.com/embed/nW5sZxrzpo0"> </iframe>
Coba sendiri »
HTML Marquee« Prev
Next »
Pernahkah anda melihat barisan tulisan yang bergerak dari samping kanan kekiri atau dari atas ke bawah pada suatu halaman web?
Itulah fungsi dari HTML marquee.
HTML marquee dibuka dengan tag <marquee> dan ditutup dengan tag </marquee>
<marquee attribute="nilai atribut">......</marquee>
Contoh kode :
<marquee> Contoh sederhana dari HTML marquee </marquee>
Hasilnya :
Codingku HTML Editori
<html>
<body>
<marquee direction="right">This text berjalan dari kiri ke kanan</marquee>
</body>
</html>
Coba sendiri »
HTML Layout« PrevNext »
HTML Layout
Sangat penting bagi anda untuk memberikan tampilan yang menarik bagi halaman website anda.
Dalam mendesain sebuah web layout anda bisa menggunakan tiga metode :
Menggunakan elemen table Menggunakan elemen div dan span
Table Layout
Penggunaan tabel sebagai layout merupakan metode pembuatan layout yang paling awal.
Menggunakan elemen table sebagai layout merupakan cara yang kurang tepat, sebab table dibuat dengan tujuan untuk menampilkan data tabular.
Contoh :
Judul utama dari website andaMenu UtamaHTMLCSSPHP...
Isi / content
www.codingku.com
source-code :
Codingku HTML Editori<table width="100%" border="0"> <tr> <td colspan="2" style="background-color:#CC99FF;"> <h1>Judul utama dari website anda</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFCCFF; width:100px;text-align:top;"> <b>Menu Utama</b><br> HTML<br> CSS<br> PHP... </td> <td style="background-color:#eeeeee;height:200px; width:300px;text-align:top;"> Isi / content </td> </tr> <tr> <td colspan="2" style="background-color:#CC99FF;"> <center> www.codingku.com</center></td></tr> </table>
Coba sendiri »
Div & Span Layout
Elemen div adalah termasuk block level element. Elemen div bisa mengandung banyak elemen2 HTML lain di dalamnya. Desain layout menggunakan div digunakan pada banyak desain halaman web pada
masa sekarang.
contoh :
Judul utama halaman web ini Menu UtamaHTMLPHPPERL... Isi / content
Copyright © 2012 www.codingku.com
source code :
Codingku HTML Editori<div style="width:100%"> <div style="background-color:#CC99FF;"> <b style="font-size:150%">Judul utama halaman web ini</b> </div> <div style="background-color:#FFCCFF; height:200px;width:100px;float:left;">
<b>Menu Utama</b><br /> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#eeeeee; height:200px;width:300px;float:left;"> Isi / content </div> <div style="background-color:#CC99FF;clear:both"> <center> Copyright © 2012 www.codingku.com </center> </div> </div>
Coba sendiri »
HTML Upload« Prev
Next »
HTML Upload
HTML upload digunakan untuk memilih file lokal kemudian menguploadnya ke server web.
HTML Tag« Prev
Next »
Berikut adalah daftar dari tag-tag HTML.
Tag Description DTD
<!--...--> Mendefinisikan komentar HTML STF
<!DOCTYPE> Mendefinisikan tipe dokumen STF
<a> Mendefinisikan anchor link STF
<abbr> Mendefinisikan sebuah singkatan STF
<acronym> Mendefinisikan akronim STF
<address> Mendefiniskan informasi kontak untuk pemiliki / penulis dokumen STF
<applet> Ditinggalkan. Medefinisikan applet TF
<area /> Mendefinisikan arae di dalam image-map STF
<b> Mendefinisikan tulisan tebal STF
<base />Mendefinisikan URL utama/target untuk semua URL alternatif di dalam dokumen
STF
<basefont />Ditinggalkan. Merincikan dari warna, ukuran dan font default dari semua tulisan yang ada di dalam dokumen.
TF
<bdo> Menggantikan arah tulisan STF
<big> Mendefinisikan tulisan besar STF
<blockquote> Mendefinisikan kutipan yang panjang STF
<body> Mendefinisikan badan dokumen STF
<br /> Mendefinisikan satu baris baru STF
<button> Mendefinisikan tombol yang bisa di-klik STF
<caption> Mendefinisikan judul dari tabel STF
<center> Ditinggalkan. Mendefinisikan tulisan agar ditengah TF
<cite> Mendefinisikan kutipan STF
<code> Mendefinisikan kode komputer STF
<col /> Mendefinisikan nilai atribut dari satu atau lebih kolom pada tabel STF
<colgroup>Merincikan sebuah grup atau lebih dari kolom-kolom dalam tabel untuk di format
STF
<dd> Mendefinisikan deskripsi dari sebuah item di daftar definisi STF
<del> Defines text that has been deleted from a document STF
<dfn> Mendefinisikan ketentuan definisi STF
<dir> Ditinggalkan. Mendefinisikan daftar direktori TF
<div> Mendefinisikan sebuah bagian di dalam sebuah dokumen STF
<dl> Mendefinisikan daftar definisi STF
<dt> Mendefinisikan ketentuan (dari sebuah item) di dalam daftar definisi STF
<em> Mendefinisikan tulisan emphasized STF
<fieldset>Menggabungkan elemen-elemen yang saling berhubungan di dalam form
STF
<font> Ditinggalkan, mendefinisikan font, warna, dan ukuran dari tulisan TF
<form> Defines an HTML form for user input STF
<frame /> Defines a window (a frame) in a frameset F
<frameset> Defines a set of frames F
<h1> to <h6> Defines HTML headings STF
<head> Mendefinisikan informasi mengenai sebuah dokumen STF
<hr /> Mendefinisikan garis horisontal STF
<html> Mendefinisikan inti dari dokumen HTML STF
<i> Mendefinisikan tulisan italic STF
<iframe> Mendefinisikan inline frame TF
<img /> Mendefinisikan gambar STF
<input /> Mendefinisikan kontrol input STF
<ins> Mendefinisikan tulisan yang telah dimasukkan ke dalam dokumen STF
<kbd> Mendefinisikan input keyboard STF
<label> Mendefinisikan label dari elemen <input> STF
<legend> Mendefinisikan Judul dari sebuah elemen <fieldset> STF
<li> Mendefinisikan daftar item STF
<link /> Mendefinisikan hubungan antara dokumen dari sumber diluar dokumen STF
<map> Defines a client-side image-map STF
<menu> Ditinggalkan. Mendifinisikan daftar menu TF
<meta /> Mendefinisikan metada mengenai sebuah dokumen HTML STF
<noframes> Defines an alternate content for users that do not support frames TF
<noscript>Defines an alternate content for users that do not support client-side scripts
STF
<object> Mendefinisikan obyek yang tertanam / embedded STF
<ol> Mendefinisikan urutan teratur STF
<optgroup>Mendefinisikan grup dari pilihan/option dalam drop-down list yang saling berhubungan
STF
<option> Mendefinisikan pilihan dalam a drop-down list STF
<p> Mendefinisikan paragraf STF
<param /> Mendefinisikan parameter dari sebuah obyek STF
<pre> Mendefinisikan tulisan yang belum di format STF
<q> Mendefinisikan kutipan pendek STF
<s> Mendefinisikan tulisan strikethrough TF
<samp> Mendefinisikan contoh dari output program komputer STF
<script> Mendefinisikan client-side script STF
<select> Mendefinisikan drop-down list STF
<small> Mendefinisikan tulisan yang lebih kecil STF
<span> Mendefinisikan sebuah bagian dari dokumen STF
<strike> Ditinggalkan. Mendefinisikan tulisan strikethrough TF
<strong> Mendefinisikan tulisan strong STF
<style> Mendefinisikan informasi style dari dokumen STF
<sub> Mendefinisikan tulisan subscripted STF
<sup> Mendefinisikan tulisan superscripted STF
<table> Mendefinisikan tabel STF
<tbody> Menggabungkan isi dari badan tabel STF
<td> Mendefinisikan kolom dari tabel STF
<textarea> Mendefinisikan kontrol dari banyak baris input (text area) STF
<tfoot> Menggabungkan footer menjadi satu grup pada tabel STF
<th> Mendefinisikan header dari tabel STF
<thead> Mendefinisikan Grup header dari tabel STF
<title> Mendefinisikan Judul dari sebuah dokumen STF
<tr> Mendefinisikan baris dari tabel STF
<tt> Mendefinisikan tulisan teletype STF
<u> Ditinggalkan. Mendefinisikan tulisan garis bawah / underline TF
<ul> Mendefinisikan urutan acak STF
<var> Mendefinisikan variabel STF
<xmp> Dintinggalkan. Mendefinisikan tulisan yang belum diformat
HTML Attribute« Prev
Next »
Atribut berikut adalah atribut standard HTML / XML
Atribut Utama / Core Attribute
Core Attribute digunakan semua elemen, kecuali : <base>, <head>, <html>, <meta>, <param>, <script>, <style> dan <title>.
Atribut Deskripsi
class Merincikan satu atau lebih nama kelas dari sebuah elemen
id Merincikan id unik dari sebuah elemen
style Merincikan sebuah inline CSS style dari sebuah elemen
title Merincikan informasi tambahan mengenai sebuah elemen
Atribut Bahasa / Language Attribute
Core Attribute digunakan semua elemen, kecuali : <base>, <head>, <html>, <meta>, <param>, <script>, <style> dan <title>.
Atribut Deskripsi
dir Merincikan arah teks dari konten sebuah elemen
lang Merincikan bahasa dari konten sebuah elemen
xml:lang Merincikan bahasa dari konten sebuah elemen (untuk dokumen XHTML)
Atribut untuk Keyboard
Attribute Description
accesskeyMerincikan kunci shortcut untuk mengaktifasi/fokus sebuah elemen
tabindex Merincikan tab order dari sebuah elemen
HTML Event
« Prev
Next »
HTML memberikan anda kemampuan untuk mengeksekusi aksi di browser, seperti misalnya menjalankan javascript ketika user mengklik salah satu elemen HTML.
Berikut adalah event-event standard yang bisa anda masukkan ke dalam elemen-elemen HTML / XML untuk mendefinisikan aksi even.
<body> dan <frameset> Events
Atribut Nilai Deskripsi
onload script Script akan jalan ketika dokumen di load
onunload script Script akan jalan ketika dokumen di unload
Form Events
Atribut-atribut berikut bisa anda gunakan pada elemen-elemen form
Atribut Nilai Deskripsi
onblur scriptScript akan dijalankan ketika sebuah elemen kehilangan fokus
onchange script Script akan dijalankan ketika sebuah elemen berubah
onfocus scriptScript to akan dijalankan ketika sebuah elemen mendapatkan fokus
onreset script Script akan dijalankan ketika sebuah elemen di-reset
onselect script Script akan dijalankan ketika sebuah elemen dipilih/selected
onsubmit script Script akan dijalankan ketika sebuah elemen di submit
Image/Gambar Events
Atribut berikut bisa anda gunakan pada elemen <img>
Atribut Nilai Deskripsi
onabort scriptScript akan dijalankan ketika proses load gambar diganggu/gagal.
Keyboard Events
Atribut-atribut berikut bisa anda gunakan untuk menjalankan event yang berhubungan dengan keyboard.
Attribute Value Deskripsi
onkeydown script Script akan dijalankan ketika tombol keyboard ditekan
onkeypress scriptScript akan dijalankan ketika tombol keyboard ditekan dan dilepaskan
onkeyup script Script akan dijalankan ketika tombol keyboard dilepaskan
Mouse Events
Atribut-atribut berikut bisa anda gunakan untuk menjalankan event yang berhubungan dengan mouse.
Attribute Value Deskripsi
onclick script Script akan dijalankan bila mouse di-klik
ondblclick script Script akan dijalankan bila mouse di-klik dua kali
onmousedown script Script akan dijalankan bila tombol mouse di tekan
onmousemove script Script akan dijalankan bila mouse di gerakkan
onmouseout scriptScript akan dijalankan bila mouse bergerak keluar dari sebuah elemen
onmouseover scriptScript akan dijalankan bila mouse bergerak kedalam sebuah elemen
onmouseup script Script akan dijalankan bila tombol mouse dilepaskan
HTML Ascii« Prev
Next »
Karakter ASCII digunakan untuk mengirimkan pesan antara komputer-komputer di internet.
Karakter ASCII
ASCII = America Standard Code for Information Interchange.
ASCII merupakan karakter 7-bit yang berjumlah 128 karakter.
Karakter-karakter yang digunakan pada masa sekarang di dunia komputer modern semuanya berasal dari karakter ASCII.
Karakter ASCII mengandung angka 0-9, huruf A-Z dan a-z ditambah dengan karakter-karakter spesial lainnya.
Berikut adalah daftar dari 128 karakter ASCII berikut dengan kode HTML-nya.
Karakter ASCII yang bisa anda tampilkan
Karakter ASCII Kode HTML Deskripsi
  spasi
! ! tanda perintah
" " tanda titik dua
# # number sign
$ $ tanda dollar
% % tanda persen
& & dan
' ' tanda petik
( ( kurung buka
) ) kurung tutup
* * asterisk
+ + tanda tambah
, , koma
- - hyphen
. . titik
/ / slash
0 0 angka 0
1 1 angka 1
2 2 angka 2
3 3 angka 3
4 4 angka 4
5 5 angka 5
6 6 angka 6
7 7 angka 7
8 8 angka 8
9 9 angka 9
: : titik dua
; ; titik koma
< < lebih kecil dari
= = sama dengan
> > lebih besar dari
? ? tanda tanya
@ @ tanda at
A A uppercase A
B B uppercase B
C C uppercase C
D D uppercase D
E E uppercase E
F F uppercase F
G G uppercase G
H H uppercase H
I I uppercase I
J J uppercase J
K K uppercase K
L L uppercase L
M M uppercase M
N N uppercase N
O O uppercase O
P P uppercase P
Q Q uppercase Q
R R uppercase R
S S uppercase S
T T uppercase T
U U uppercase U
V V uppercase V
W W uppercase W
X X uppercase X
Y Y uppercase Y
Z Z uppercase Z
[ [ left square bracket
\ \ backslash
] ] right square bracket
^ ^ caret
_ _ underscore
` ` grave accent
a a lowercase a
b b lowercase b
c c lowercase c
d d lowercase d
e e lowercase e
f f lowercase f
g g lowercase g
h h lowercase h
i i lowercase i
j j lowercase j
k k lowercase k
l l lowercase l
m m lowercase m
n n lowercase n
o o lowercase o
p p lowercase p
q q lowercase q
r r lowercase r
s s lowercase s
t t lowercase t
u u lowercase u
v v lowercase v
w w lowercase w
x x lowercase x
y y lowercase y
z z lowercase z
{ { kurung kurawal pembuka
| | vertical bar
} } kurung kurawal penutup
~ ~ tilde
Karakter Device Control ASCII
Karakter Device Control ASCII pada dasarnya di desain untuk mengontrol alat hardware.
Karakter Device Control tidak memiliki fungsi apa-apa dalam dokumen HTML.
ASCII Character HTML Entity Code Description
NUL � null character
SOH  start of header
STX  start of text
ETX  end of text
EOT  end of transmission
ENQ  enquiry
ACK  acknowledge
BEL  bell (ring)
BS  backspace
HT 	 horizontal tab
LF line feed
VT  vertical tab
FF  form feed
CR carriage return
SO  shift out
SI  shift in
DLE  data link escape
DC1  device control 1
DC2  device control 2
DC3  device control 3
DC4  device control 4
NAK  negative acknowledge
SYN  synchronize
ETB  end transmission block
CAN  cancel
EM  end of medium
SUB  substitute
ESC  escape
FS  file separator
GS  group separator
RS  record separator
US  unit separator
DEL  delete (rubout)
HTML Iso 8859 1« Prev
Next »
ISO-8859-1
ISO-8859-1 adalah karakter default dari banyak browser utama.
128 karakter pertama dari ISO-8859-1 pada awalnya berasal dari ASCII karakter (angka 0-9, huruf kecil dan besar alphabet Inggris dan beberapa karakter spesial)
Bagian yang lebih tinggi dari ISO-8859-1 (kode 160-255) berisi karakter yang digunakan di negara-negara Eropa Barat dan beberapa karakter khusus yang umum digunakan.
Entitas digunakan untuk menerapkan karakter cadangan atau untuk mengekspresikan karakter yang tidak dapat dengan mudah dihasilkan dengan keyboard.
Karakter Cadangan dalam HTML
Beberapa karakter adalah cadangan dalam HTML dan XML. Sebagai contoh anda tidak dapat menggunakan lebih dari atau kurang dari tanda-tanda dalam teks anda karena browser bisa melakukan kesalahan untuk markup.
HTML dan XHTML prosesor harus mendukung lima karakter khusus yang tercantum dalam tabel
berikut:
Karakter No Entitas Nama Entitas Deskripsi
" " " tanda kutip
' ' ' tanda petik
& & & dan
< < < lebih kecil dari
> > > lebih besar dari
HTML Simbol« Prev
Next »
HTML Simbol Entitas ™
Referensi dari simbol entitas berikut mencangkup simbol Matematika, karakter Yunani, berbagai macam panah dan simbol-simbol lainnya.
Karakter-karakter Matematika yang di dukung oleh HTML
Karakter No Entitas Nama Entitas Deskripsi
∀ ∀ ∀ untuk semua
∂ ∂ ∂ bagian
∃ ∃ ∃ ada
∅ ∅ ∅ kosong
∇ ∇ ∇ nabla
∈ ∈ ∈ isin
∉ ∉ ∉ notin
∋ ∋ ∋ ni
∏ ∏ ∏ prod
∑ ∑ ∑ sum
− − − minus
∗ ∗ ∗ lowast
√ √ √ akar
∝ ∝ ∝ proporsional terhadap
∞ ∞ ∞ tanpa batas
∠ ∠ ∠ sudut
∧ ∧ ∧ dan
∨ ∨ ∨ atau
∩ ∩ ∩ cap
∪ ∪ ∪ cup
∫ ∫ ∫ integral
∴ ∴ ∴ oleh karena itu
∼ ∼ ∼ mirip dengan
≅ ≅ ≅ konkruen
≈ ≈ ≈ hampir sama
≠ ≠ ≠ tidak sama
≡ ≡ ≡ sepadan
≤ ≤ ≤ kurang atau sama
≥ ≥ ≥ lebih atau sama
⊂ ⊂ ⊂ bagian kecil dari
⊃ ⊃ ⊃ bagian besar dari
⊄ ⊄ ⊄ bukan bagian dari
⊆ ⊆ ⊆ bagian kecil atau sama
⊇ ⊇ ⊇ bagian besar atau sama
⊕ ⊕ ⊕ lingkaran tambah
⊗ ⊗ ⊗ lingkaran berulang
⊥ ⊥ ⊥ tegak lurus
⋅ ⋅ ⋅ operator titik
Karakter Yunani yang di dukung oleh HTML
Karakter No Entitas Nama Entitas Deskripsi
Α Α Α Alpha
Β Β Β Beta
Γ Γ Γ Gamma
Δ Δ Δ Delta
Ε Ε Ε Epsilon
Ζ Ζ Ζ Zeta
Η Η Η Eta
Θ Θ Θ Theta
Ι Ι Ι Iota
Κ Κ Κ Kappa
Λ Λ Λ Lambda
Μ Μ Μ Mu
Ν Ν Ν Nu
Ξ Ξ Ξ Xi
Ο Ο Ο Omicron
Π Π Π Pi
Ρ Ρ Ρ Rho
undefined Sigmaf
Σ Σ Σ Sigma
Τ Τ Τ Tau
Υ Υ Υ Upsilon
Φ Φ Φ Phi
Χ Χ Χ Chi
Ψ Ψ Ψ Psi
Ω Ω Ω Omega
α α α alpha
β β β beta
γ γ γ gamma
δ δ δ delta
ε ε ε epsilon
ζ ζ ζ zeta
η η η eta
θ θ θ theta
ι ι ι iota
κ κ κ kappa
λ λ λ lambda
μ μ μ mu
ν ν ν nu
ξ ξ ξ xi
ο ο ο omicron
π π π pi
ρ ρ ρ rho
ς ς ς sigmaf
σ σ σ sigma
τ τ τ tau
υ υ υ upsilon
φ φ φ phi
χ χ χ chi
ψ ψ ψ psi
ω ω ω omega
ϑ ϑ ϑ theta symbol
ϒ ϒ ϒ upsilon symbol
ϖ ϖ ϖ pi symbol
Entitas lain yang di dukung oleh HTML
Karakter No Entitas Nama Entitas Deskripsi
ΠΠΠcapital ligature OE
œ œ œ small ligature oe
Š Š Š capital S with caron
š š š small S with caron
Ÿ Ÿ Ÿ capital Y with diaeres
ƒ ƒ ƒ f with hook
ˆ ˆ ˆ modifier letter circumflex accent
˜ ˜ ˜ small tilde
    en space
    em space
    thin space
‌ ‌ zero width non-joiner
‍ ‍ zero width joiner
‎ ‎ left-to-right mark
‏ ‏ right-to-left mark
– – – en dash
— — — em dash
‘ ‘ ‘ left single quotation mark
’ ’ ’ right single quotation mark
‚ ‚ ‚ single low-9 quotation mark
“ “ “ left double quotation mark
” ” ” right double quotation mark
„ „ „ double low-9 quotation mark
† † † dagger
‡ ‡ ‡ double dagger
• • • bullet
… … … horizontal ellipsis
‰ ‰ ‰ per mille
′ ′ ′ minutes
″ ″ ″ seconds
‹ ‹ ‹ single left angle quotation
› › › single right angle quotation
‾ ‾ ‾ overline
€ € € euro
™ ™ or ™ ™ trademark
← ← ← left arrow
↑ ↑ ↑ up arrow
→ → → right arrow
↓ ↓ ↓ down arrow
↔ ↔ ↔ left right arrow
↵ ↵ ↵ carriage return arrow
⌈ ⌈ ⌈ left ceiling
⌉ ⌉ ⌉ right ceiling
⌊ ⌊ ⌊ left floor
⌋ ⌋ ⌋ right floor
◊ ◊ ◊ lozenge
♠ ♠ ♠ spade
♣ ♣ ♣ club
♥ ♥ ♥ heart
♦ ♦ ♦ diamond
