16
Makalah HTML HTML O L E H Nama : reza rahmad Nim T3111056 Kelas E FAKULTAS ILMU KOMPUTER

Kumpulan Tag HTML

Embed Size (px)

Citation preview

Page 1: Kumpulan Tag HTML

Makalah HTML

HTMLO

L

E

H

Nama : reza rahmad

Nim T3111056

Kelas E

FAKULTAS ILMU KOMPUTER

UNIVERSITAS ICHSAN GORONTALO

2013

Page 2: Kumpulan Tag HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut denganSGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). [1]

Perkembangan

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5.

Sejarah dari standar HTML

HTML 2.0  — (RFC 1866) disetujui sebagai standar 22 September 1995,

HTML 3.2  — 14 Januari 1996,

HTML 4.0  — 18 Desember 1997,

HTML 4.01  (minor fixes) — 24 Desember 1999,

ISO/IEC 15445:2000  ("ISO HTML", berdasar pada HTML 4.01 Strict) — 15 Mei 2000.

HTML 5  masih dalam draft pengerjaan — Januari 2008.

Kegunaan

Mengintegerasikan gambar dengan tulisan.

Membuat Pranala.

Mengintegerasikan berkas suara dan rekaman gambar hidup.

Page 3: Kumpulan Tag HTML

Membuat form interaktif.[2]

HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. PenggunaMicrosoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.[3]

Menyunting format tulisan

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

Menampilkan tulisan dalam bentuk cetakan tebal

Menampilkan sekelompok kata dalam bentuk miring

Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markah/Tanda

Secara garis besar, terdapat 4 jenis elemen dari HTML:

Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1

Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,

Hiperteks . Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/">Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),

Page 4: Kumpulan Tag HTML

Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan :

Pranala menuju bagian lain dari page.

Pranala menuju page lain dalam satu web site.

Pranala menuju resource atau web site yang berbeda.[4]

Selain markup presentasional , markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

Contoh dokumen HTML sederhana

<!DOCTYPE html>

<html>

<head bgcolor=black text=white>

<title>'''Selamat Datang''' HTML</title>

</head>

<body>

<p>Nama saya Adrianus!</p>

</body>

</html>

Head

Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya digunakan untuk menentukan informasi tertentu mengenai document HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.

Contoh:

<meta name="author" content="ubuntu-online">

Elemen Body

Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

Page 5: Kumpulan Tag HTML

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

Tag biasanya merupakan suatu pasangan yang disebut dengan :

Tag awal, dinyatakan dalam bentuk <nama tag>

Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.

Contoh : untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P ALIGN=”left”> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

Page 6: Kumpulan Tag HTML

Kumpulan Tag HTML1(!-- --) Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser2(a href) Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut3(a name) Membuat nama bagian yang didefinisikan pada link pada halaman yang sama4(applet) Sebagai awal dari Java applets5(area) Mendefinisikan daerah yang dapat diklik (link) pada image map6(b) Membuat teks tebal7(basefont) Membuat atribut teks default seperti jenis, ukuran dan warna font8(bgsound) Memberi (suara latar) background sound pada halaman web9(big) Memperbesar ukuran teks sebesar satu point dari defaultnya10(blink) Membuat teks berkedip11(body) Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link12(br) Pindah baris13(caption) Membuat caption pada tabel14(center) Untuk perataan tengah terhadap teks atau gambar15(comment) Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser16(dd) Indents teks17(div) Represents different sections of text.18(embed) Menambahkan sound or file avi ke halaman web19(fn) Seperti tag (a name)20(font) Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks21(form) Mendefinisikan input form22(frame) Mendefinisikan frame23(frameset) Mendefinisikan attribut halaman yang akan menggunakan frame24(h1 ... h6) Ukuran font25(head) Mendefinisikan head document.26(hr) Membuat garis horizontal27(html) Bararti dokumen html28(i) Membuat teks miring29(img) Image, imagemap atau an animation30(input) Mendefinisikan input field pada form31(li) Membuat bullet point atau baris baru pada list (berpasangan dengan tag (dir), (menu) (ol) and (ul)32(map) Mendefinisikan client-side map33(marquee) Membuat scrolling teks (teks berjalan) - hanya pada MS IE34(nobr) Mencegah ganti baris pada teks atau images35(noframes) Jika browser user tidak mendukung frame36(ol) Mendefinisikan awal dan akhir list37(p) Ganti paragraf38(pre) Membuat teks dengan ukuran huruf yg sama39(script) Mendefinisikan awal script40(table) Membuat tabel41(td) Kolom pada tabel42(title) Mendefinisikan title43(tr) Baris pada tabel44(u) Membuat teks bergaris bawah

Page 7: Kumpulan Tag HTML

Kode Warna HTML Full Lengkap

Kode Warna HTML Tips Blogging

Warna adalah sebuah elemen penting pada suatu website maupun blog , warna juga memiliki nilai lebih untuk urusan menarik minat pengunjung agar betah berlama-lama dalam blog atau website kita, untuk keperluan merubah warna background, dan juga warna widget dan elemen-elemen penting yang terdapat dalam suatu blog maupun pada halaman postingan tentu kita membutuhkan sebuah kode warna baik dalam Hexa RGB maupun Decimal RGB, berikut adalah kumpulan kode warna lengkap yang dapat anda manfaatkan.

Color Name Hexa Code

RGB

Decimal Code

RGB

Reds

IndianRed #CD5C5C 2059292

LightCoral #F08080 240128128

Salmon #FA8072 250128114

DarkSalmon #E9967A 233150122

LightSalmon #FFA07A 255160122

Page 8: Kumpulan Tag HTML

Crimson #DC143C 2202060

Red #FF0000 25500

FireBrick #B22222 1783434

DarkRed #8B0000 13900

Pinks

Pink #FFC0CB 255192203

LightPink #FFB6C1 255182193

HotPink #FF69B4 255105180

DeepPink #FF1493 25520147

MediumVioletRed #C71585 19921133

PaleVioletRed #DB7093 219112147

Oranges

LightSalmon #FFA07A 255160122

Coral #FF7F50 25512780

Tomato #FF6347 2559971

OrangeRed #FF4500 255690

DarkOrange #FF8C00 2551400

Orange #FFA500 2551650

Yellows

Gold #FFD700 2552150

Yellow #FFFF00 2552550

LightYellow #FFFFE0 255255224

LemonChiffon #FFFACD 255250205

LightGoldenrodYellow #FAFAD2 250250210

PapayaWhip #FFEFD5 255239213

Page 9: Kumpulan Tag HTML

Moccasin #FFE4B5 255228181

PeachPuff #FFDAB9 255218185

PaleGoldenrod #EEE8AA 238232170

Khaki #F0E68C 240230140

DarkKhaki #BDB76B 189183107

Purples

Lavender #E6E6FA 230230250

Thistle #D8BFD8 216191216

Plum #DDA0DD 221160221

Violet #EE82EE 238130238

Orchid #DA70D6 218112214

Fuchsia #FF00FF 2550255

Magenta #FF00FF 2550255

MediumOrchid #BA55D3 18685211

MediumPurple #9370DB 147112219

Amethyst #9966CC 153102204

BlueViolet #8A2BE2 13843226

DarkViolet #9400D3 1480211

DarkOrchid #9932CC 15350204

DarkMagenta #8B008B 1390139

Purple #800080 1280128

Indigo #4B0082 750130

SlateBlue #6A5ACD 10690205

DarkSlateBlue #483D8B 7261139

MediumSlateBlue #7B68EE 123104238

Greens

Page 10: Kumpulan Tag HTML

GreenYellow #ADFF2F 17325547

Chartreuse #7FFF00 1272550

LawnGreen #7CFC00 1242520

Lime #00FF00 02550

LimeGreen #32CD32 5020550

PaleGreen #98FB98 152251152

LightGreen #90EE90 144238144

MediumSpringGreen #00FA9A 0250154

SpringGreen #00FF7F 0255127

MediumSeaGreen #3CB371 60179113

SeaGreen #2E8B57 4613987

ForestGreen #228B22 3413934

Green #008000 01280

DarkGreen #006400 01000

YellowGreen #9ACD32 15420550

OliveDrab #6B8E23 10714235

Olive #808000 1281280

DarkOliveGreen #556B2F 8510747

MediumAquamarine #66CDAA 102205170

DarkSeaGreen #8FBC8F 143188143

LightSeaGreen #20B2AA 32178170

DarkCyan #008B8B 0139139

Teal #008080 0128128

Blues/Cyans

Aqua #00FFFF 0255255

Cyan #00FFFF 0255255

Page 11: Kumpulan Tag HTML

LightCyan #E0FFFF 224255255

PaleTurquoise #AFEEEE 175238238

Aquamarine #7FFFD4 127255212

Turquoise #40E0D0 64224208

MediumTurquoise #48D1CC 72209204

DarkTurquoise #00CED1 0206209

CadetBlue #5F9EA0 95158160

SteelBlue #4682B4 70130180

LightSteelBlue #B0C4DE 176196222

PowderBlue #B0E0E6 176224230

LightBlue #ADD8E6 173216230

SkyBlue #87CEEB 135206235

LightSkyBlue #87CEFA 135206250

DeepSkyBlue #00BFFF 0191255

DodgerBlue #1E90FF 30144255

CornflowerBlue #6495ED 100149237

MediumSlateBlue #7B68EE 123104238

RoyalBlue #4169E1 65105225

Blue #0000FF 00255

MediumBlue #0000CD 00205

DarkBlue #00008B 00139

Navy #000080 00128

MidnightBlue #191970 2525112

Browns

Cornsilk #FFF8DC 255248220

BlanchedAlmond #FFEBCD 255235205

Page 12: Kumpulan Tag HTML

Bisque #FFE4C4 255228196

NavajoWhite #FFDEAD 255222173

Wheat #F5DEB3 245222179

BurlyWood #DEB887 222184135

Tan #D2B48C 210180140

RosyBrown #BC8F8F 188143143

SandyBrown #F4A460 24416496

Goldenrod #DAA520 21816532

DarkGoldenrod #B8860B 18413411

Peru #CD853F 20513363

Chocolate #D2691E 21010530

SaddleBrown #8B4513 1396919

Sienna #A0522D 1608245

Brown #A52A2A 1654242

Maroon #800000 12800

Whites

White #FFFFFF 255255255

Snow #FFFAFA 255250250

Honeydew #F0FFF0 240255240

MintCream #F5FFFA 245255250

Azure #F0FFFF 240255255

AliceBlue #F0F8FF 240248255

GhostWhite #F8F8FF 248248255

WhiteSmoke #F5F5F5 245245245

Seashell #FFF5EE 255245238

Beige #F5F5DC 245245220

Page 13: Kumpulan Tag HTML

OldLace #FDF5E6 253245230

FloralWhite #FFFAF0 255250240

Ivory #FFFFF0 255255240

AntiqueWhite #FAEBD7 250235215

Linen #FAF0E6 250240230

LavenderBlush #FFF0F5 255240245

MistyRose FFE4E1 255228225

Greys

Gainsboro #DCDCDC 220220220

LightGrey #D3D3D3 211211211

Silver #C0C0C0 192192192

DarkGray #A9A9A9 169169169

Gray #808080 128128128

DimGray #696969 105105105

LightSlateGray #778899 119136153

SlateGray #708090 112128144

DarkSlateGray #2F4F4F 477979

Black #000000 00