Apa itu Html? HTML singkatan dari Hyper Text Markup Language, dalam arti umum, sebuah web adalah sebuah dokumen HTML, yang mana sebuah HTML itu sendiri merupakan bahasa yang menggunakaan tanda-tanda tertentu(Tag) untuk menyatakan kode-kode yang harus diterjemahkan oleh Browser, agar halaman dapat di tampilkan secara benar.
Oleh karena itu, bagi orang-orang yang berkecimpung di dunia website, blog, dsb tentunya harus memahami penggunaan kode HTML tersebut. Karena dengan begitu, jika terjadi eror dalam website yang kita kelola, kita mampu memperbaiki nya sendiri. Selain itu, dengan kita memahami penggunaan kode kode HTML, kita akan mudah mengoptimalkan website yang kita kelola sehingga dapat berjalan optimal. nah, dalam rangka memahami kode HTML tersebut, dalam postingan ini di sediakan Daftar Tag HTML yang biasa di gunakan.
Berikut ini adalah daftar Tag Pada Kode HTML yang biasanya sering di gunakan
Tag Utama
Tag
|
Atribut
|
Deskripsi
|
<html></html>
|
Baris paling atas
dari setiap file HTML
|
|
<head></head>
|
Informasi umum dari
sebuah halaman web
|
|
<title></title>
|
Judul halaman.
Terdapat pada head
|
|
<body></body>
|
Background, bgcolor,
bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight,
marginwidth
|
Settingan atribut
untuk seluruh dokumen
|
Modifikasi Teks
Tag
|
Deskripsi
|
Contoh
|
<b></b>
|
Teks tebal
|
Teks tebal
|
<i> </i>
|
Teks miring
|
Teks miring
|
<u> </u>
|
Teks garis bawah
|
Teks garis bawah
|
<h1></h1>
|
Header 1
|
Header 1
|
<h2></h2>
|
Header 2
|
Header 2
|
<h3>
</h3>
|
Header 3
|
Header 3
|
<h4></h4>
|
Header 4
|
Header 4
|
<h5></h5>
|
Header 5
|
Header 5
|
<h6></h6>
|
Header 6
|
Header 6
|
<sub></sub>
|
Subscript
|
Subscript
|
<sup></sup>
|
Superscript
|
Superscript
|
Font
Tag
|
Atribut
|
Deskripsi
|
<font></font>
|
Color, size, name
|
Mengubah gaya suatu
huruf
|
Link
Tag
|
Atribut
|
Deskripsi
|
<a> </a>
|
Href, target, style,
class, name, id
|
Membuat link ke
dokumen atau situs lainnya
|
Gambar
Tag
|
Atribut
|
Deskripsi
|
<img>
|
Src, alt, name,
border, height, width
|
Menampilkan sebuah
gambar
|
Table
Tag
|
Deskripsi
|
Contoh
|
<table></table>
|
Border, cellpadding,
cellspacing, width, height, name, id, title, bgcolor, background, align,
valign
|
Mengatur semua
elemen table
|
<tr></tr>
|
Height, bgcolor,
background, align, valign, title
|
Membuat baris baru
|
<td></td>
|
Height, width,
bgcolor, background, align, valign, title, colspan, rowspan
|
Membuat kolom
|
<th></th>
|
Height, width,
bgcolor, background, align, valign, title, colspan, rowspan
|
Header(kepala
tabel). Otomatis ke tengah dan tebal
|
<tbody></tbody>
|
Height, width,
align, valign, bgcolor, background
|
Format yang berlaku
bagi cell yang diapit tag
|
<colgroup></colgroup>
|
Height, width,
align, valign, bgcolor, background, colspan
|
Format yang berlaku
bagi kolom
|
Formatting
Tag
|
Deskripsi
|
Contoh
|
<blockquote></blockquote>
|
Digunakan untuk
mengatur text dan gambar dalam suatu tag
|
Contoh text in a
block quote format ( “ “ )
|
<ol></ol>
|
Ordered List
(digunakan dengan <li>)
|
1. Item 1
|
<ul></ul>
|
Unordered List
(digunakan dengan <li>)
|
• Item 1
|
<li>
|
Elemen List
|
|
<dd></dd>
|
Definition List
|
|
<dt>
|
Definition Term
|
|
<dd>
|
Definition
Description
|
|
<p></p>
|
Paragraf
|
|
<br>
|
Ganti baris
|
|
<hr>
|
Garis horizontal
|
|
<center></center>
|
Menengahkan elemen
|
|
<marquee></marquee>
|
Membuat Tulisan Bergerak
|
Form
Tag
|
Deskripsi
|
Contoh
|
<form></form>
|
Method, action,
name, enctype
|
Mengatur elemen dari
form
|
<input type=>
|
Text, password,
hidden, radio, checkbox, submit, image, reset
|
Variasi dari tipe
elemen input dalam form
|
<select></select>
|
Name, size
|
Membuat combo-box.
Digunakan bersama dengan option
|
<option>
|
Selected, name,
value
|
|
<textarea></textarea>
|
Name, rows, cols,
wrap
|
Membuat Text Area
untuk input text dengan length yang lebih besar dari input text.
|
Berikut ini adalah tabel daftar nama warna (color name) dan nilai hexadesimal (or a hex value)
| Color Name | HEX Code | Color (Contoh warna) |
|---|---|---|
| Alice Blue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 | |
| Black | #000000 | |
| BlanchedAlmond | #FFEBCD | |
| Blue | #0000FF | |
| BlueViolet | #8A2BE2 | |
| Brown | #A52A2A | |
| BurlyWood | #DEB887 | |
| CadetBlue | #5F9EA0 | |
| Chartreuse | #7FFF00 | |
| Chocolate | #D2691E | |
| Coral | #FF7F50 | |
| CornflowerBlue | #6495ED | |
| Cornsilk | #FFF8DC | |
| Crimson | #DC143C | |
| Cyan | #00FFFF | |
| DarkBlue | #00008B | |
| DarkCyan | #008B8B | |
| DarkGoldenRod | #B8860B | |
| DarkGray | #A9A9A9 | |
| DarkGreen | #006400 | |
| DarkKhaki | #BDB76B | |
| DarkMagenta | #8B008B | |
| DarkOliveGreen | #556B2F | |
| Darkorange | #FF8C00 | |
| DarkOrchid | #9932CC | |
| DarkRed | #8B0000 | |
| DarkSalmon | #E9967A | |
| DarkSeaGreen | #8FBC8F | |
| DarkSlateBlue | #483D8B | |
| DarkSlateGray | #2F4F4F | |
| DarkTurquoise | #00CED1 | |
| DarkViolet | #9400D3 | |
| DeepPink | #FF1493 | |
| DeepSkyBlue | #00BFFF | |
| DimGray | #696969 | |
| DodgerBlue | #1E90FF | |
| FireBrick | #B22222 | |
| FloralWhite | #FFFAF0 | |
| ForestGreen | #228B22 | |
| Fuchsia | #FF00FF | |
| Gainsboro | #DCDCDC | |
| GhostWhite | #F8F8FF | |
| Gold | #FFD700 | |
| GoldenRod | #DAA520 | |
| Gray | #808080 | |
| Green | #008000 | |
| GreenYellow | #ADFF2F | |
| HoneyDew | #F0FFF0 | |
| HotPink | #FF69B4 | |
| IndianRed | #CD5C5C | |
| Indigo | #4B0082 | |
| Ivory | #FFFFF0 | |
| Khaki | #F0E68C | |
| Lavender | #E6E6FA | |
| LavenderBlush | #FFF0F5 | |
| LawnGreen | #7CFC00 | |
| LemonChiffon | #FFFACD | |
| LightBlue | #ADD8E6 | |
| LightCoral | #F08080 | |
| LightCyan | #E0FFFF | |
| LightGoldenRodYellow | #FAFAD2 | |
| LightGrey | #D3D3D3 | |
| LightGreen | #90EE90 | |
| LightPink | #FFB6C1 | |
| LightSalmon | #FFA07A | |
| LightSeaGreen | #20B2AA | |
| LightSkyBlue | #87CEFA | |
| LightSlateGray | #778899 | |
| LightSteelBlue | #B0C4DE | |
| LightYellow | #FFFFE0 | |
| Lime | #00FF00 | |
| LimeGreen | #32CD32 | |
| Linen | #FAF0E6 | |
| Magenta | #FF00FF | |
| Maroon | #800000 | |
| MediumAquaMarine | #66CDAA | |
| MediumBlue | #0000CD | |
| MediumOrchid | #BA55D3 | |
| MediumPurple | #9370D8 | |
| MediumSeaGreen | #3CB371 | |
| MediumSlateBlue | #7B68EE | |
| MediumSpringGreen | #00FA9A | |
| MediumTurquoise | #48D1CC | |
| MediumVioletRed | #C71585 | |
| MidnightBlue | #191970 | |
| MintCream | #F5FFFA | |
| MistyRose | #FFE4E1 | |
| Moccasin | #FFE4B5 | |
| NavajoWhite | #FFDEAD | |
| Navy | #000080 | |
| OldLace | #FDF5E6 | |
| Olive | #808000 | |
| OliveDrab | #6B8E23 | |
| Orange | #FFA500 | |
| OrangeRed | #FF4500 | |
| Orchid | #DA70D6 | |
| PaleGoldenRod | #EEE8AA | |
| PaleGreen | #98FB98 | |
| PaleTurquoise | #AFEEEE | |
| PaleVioletRed | #D87093 | |
| PapayaWhip | #FFEFD5 | |
| PeachPuff | #FFDAB9 | |
| Peru | #CD853F | |
| Pink | #FFC0CB | |
| Plum | #DDA0DD | |
| PowderBlue | #B0E0E6 | |
| Purple | #800080 | |
| Red | #FF0000 | |
| RosyBrown | #BC8F8F | |
| RoyalBlue | #4169E1 | |
| SaddleBrown | #8B4513 | |
| Salmon | #FA8072 | |
| SandyBrown | #F4A460 | |
| SeaGreen | #2E8B57 | |
| SeaShell | #FFF5EE | |
| Sienna | #A0522D | |
| Silver | #C0C0C0 | |
| SkyBlue | #87CEEB | |
| SlateBlue | #6A5ACD | |
| SlateGray | #708090 | |
| Snow | #FFFAFA | |
| SpringGreen | #00FF7F | |
| SteelBlue | #4682B4 | |
| Tan | #D2B48C | |
| Teal | #008080 | |
| Thistle | #D8BFD8 | |
| Tomato | #FF6347 | |
| Turquoise | #40E0D0 | |
| Violet | #EE82EE | |
| Wheat | #F5DEB3 | |
| White | #FFFFFF | |
| WhiteSmoke | #F5F5F5 | |
| Yellow | #FFFF00 | |
| YellowGreen | #9ACD32 |
Untuk belajar membuat HTML, anda membutuhkan 2 buah program aplikasi yaitu HTML editor dan web browser. Untuk HTML Editor, anda dapat menggunakan yang paling mudah dan mungkin sudah ada di komputer anda yaitu Notepad. Sedangkan untuk browser, silahkan nanti gunakan Internet Explorer atau Mozilla Firefox yang mungkin juga sudah ada di komputer anda.
Jadi saat ini kita bisa langsung mempraktekkan bagaimana cara membuat HTML dari yang paling dasar. Notepad nantinya akan kita gunakan mengetikkan kode-kode atau tag HTML. Sedangkan web browser atau biasa disebut “browser” saja, akan kita gunakan untuk melihat hasil halaman HTML yang sudah kita buat. Langsung saja kepada praktek cara membuat HTML dasar, silahkan ikuti langkah-langkah berikut ini.
Buka aplikasi Notepad di komputer anda lalu ketikkan kode HTML berikut ini :
1 | <html> |
2 | <head> |
3 | <title>Belajar HTML</title> |
4 | </head> |
5 | <body> |
6 | Hallo, selamat belajar HTML. |
7 | </body> |
8 | </html> |
Selanjutnya silahkan klik menu File-Save As untuk menyimpan file yang anda buat. Simpan dokumen/file diatas dengan nama “latihan.html”. Pastikan anda mengetikkan “latihan.html” (tanpa tanda petik) ketika menyimpan, karena jika tidak maka file yang tersimpan otomatis menjadi file dengan ektension “txt”.
Kemudian tutup aplikasi Notepad anda. Lalu buka windows explorer dan cari dimana file tadi anda simpan. Jika sudah ditemukan, silahkan buka file HTML tersebut dengan cara memilih dan klik double.
Jika sudah benar, maka seharusnya file tersebut otomatis akan dibuka dengan menggunakan aplikasi browser yang ada di komputer anda seperti Internet Explorer atau Mozilla Firefox. Dan jika menggunakan Firefox tampilan akan menjadi seperti berikut.
Sampai disini anda diharapkan sudah mampu dan mengerti tentang bagaimana cara membuat HTML. Artinya anda tahu dimana mengetikkan kode HTML lalu menyimpannya dan bagaimana cara melihat tampilan HTML yang anda buat melalui browser. Selanjutnya anda tinggal mengikuti tutorial HTML dan begitu melihat contoh kode HTML yang diberikan maka anda tahu bagaimana mencobanya.
Pada tahap belajar HTML yang lebih jauh, anda dapat menggunakan software editor HTML seperti Dreamweaver. Dengan menggunakan editor yang memang khusus untuk HTML, anda akan banyak dipermudah karena tersedia berbagai bantuan untuk membuat HTML yang lebih kompleks.
Sumber:
http://hacksevenseven.blogspot.co.id/2013/06/daftar-lengkap-kode-kode-html.html http://www.komputerseo.com/2010/01/tabel-warna.html
http://jtb9.blogspot.co.id/
