HTML (HyperText Markup Language) Aspire

HTML

Ya di sini saya akan menjelaskan sedikit tentang HTML. Apa itu HTML? HTML adalah singkatan dari HyperText Markup Language. HTML merupakan sebuah bahasa yang digunakan mendesain sebuah web.

Langsung kita mulai saja penjelasannya dimulai dari
HTML Basic.

- HTML Basic

HTML Basic merupakan dasar dari HTML. HTML yang paling dasar seperti HTML Document, HTML Heading, HTML Paragraph, HTML Images dan HTML Links.

- HTML Document merupakan HTML yang berfungsi membuat dokumen yang didalamnya dapat diisi konten sesuai keinginan kita.Untuk memanggil HTML Document digunakan : <!DOCTYPE html>, <html></html>, <body> </body>.

- HTML Heading merupakan HTML yang berada di dalam HTML Document. HTML Heading digunakan untuk membuat sebuah heading atau bias disebut judul dari sebuah artikel atau konten yang akan kita publikasikan. Untuk memanggil HTML Heading digunakan : <h1> sampai <h6>. Yang membedakan <h1> sampai <h6> adalah semakin besar angkanya semakin kecil ukuran huruf yang ditampilkan.

- HTML Paragraph juga merupakan HTML yang berada di dalam HTML Document. HTML Paragraph seperti namanya digunakan untuk membuat sebuah paragraph dengan menggunakan tag : <p> </p>

- HTML Images adalah HTML yang digunakan untuk menampilkan gambar. Kode yang digunakan adalah <img src=” “ alt=” “ width=” “ height=” “>. src adalah sumber gambar berada. alt adalah teks alternative. width untuk mengatur lebar sedangkan height untuk mengatus tinggi gambar.

- HTML Links Digunakan untuk membuat sebuah link yang menghubungkan dokumen 1 ke dokumen lainnya. Kode yang digunakan adalah <a> </a>.

Contoh script HTML Basic :

<!DOCTYPE html>

<html>

<body>

<h1>Contoh Script HTML Basic</h1>

<p>Ini merupakan bagian paragraf dalam html paragrah yang berisi teks yang berbentuk paragraf.</p>

<p>Gambar dibawah ini mengandung link yang menuju ke w3school.com</p>

</body>

</html>

Hasil dari script di atas :

- HTML Element

HTML Element merupakan pembentuk HTML Document atau dengan kata lain HTML Document berisi HTML Element.

HTML Element ditulis dengan start tag, end tag dan konten/isi berada ditengahnya, contoh :

<start tag>konten<end tag>

HTML Element selalu diawali dengan start tag dan diakhiri dengan end tag, namun ada beberapa HTML element yang tidak memiliki end tag. Berikut beberapa contoh HTML Element :

<p>Paragraf</p>

<h1>Heading</h1>

<br>

Contoh script HTML Element :

<!DOCTYPE html>

<html>

<body>

<h1>Breakin</h1>

<p>Breakin merupakan istilah yang dipakai untuk orang yang melakukan breakdance, sedangkan orang yang melakukan breakdance itu disebut B-boy</p>

</body>

</html>

Hasil dari script di atas :

- HTML Attributes

HTML attribute bisa disebut sebagai pelengkap dari HTML Element atau tambahan-tambahan yang melengkapi HTML Element.

Ciri dari HTML Attribute :

è HTML Element bisa mempunyai attributes

è Attributes memberikan informasi tambahan tentang element

è Attributes selalu ditempatkan di start tag

è Attributes selalu terdiri dari pasangan name/value seperti name=”value”

Beberapa macam attribute dalam HTML adalah :

1. Title Attribute

Untuk memberi judul yang muncul jika cursor di tempatkan di atas elemen yang diberi attribute Title

2. Href Attribute

Yaitu atribut untuk memberi link di sebuah teks ataupun gambar.

3. Size Attribute

Untuk mengatur ukuran sebuah gambar.

4. Alt attribute

Memberikan keterangan pada gambar jika sebuah gambar gagal di panggil atau di load.

Contoh script HTML Attbirutes :

<!DOCTYPE html>

<html>

<body>

Title Attribute

<p title=”Rubik’s Cube”>Rubik’s cube merupakan sebuah permainan yang diciptakan oleh Erno Rubik pada tahun 1974 dimana pertama kali diciptakan untuk media pembelajaran mata kuliah matematika.</p>

Href Attribute

<a href=”http://id.wikipedia.org/wiki/Kubus_Rubik”>Link Rubik Cube</a>

Size Attribute

Alt Attribute

</body>

</html>

Hasil dari script di atas :

- HTML Heading

HTML Heading bisa disebut juga sebagai judul dari sebuah dokumen. HTML terdiri dari <h1> sampai <h6>. Semakin besar nominalnya semakin kecil ukuran hurufnya.

Contoh script HTML Heading :

<!DOCTYPE html>

<html>

<body>

<h1>Ini Heading 1</h1>

<h2>Ini Heading 2</h2>

<h3>Ini Heading 3</h3>

<h4>Ini Heading 4</h4>

<h5>Ini Heading 5</h5>

<h6>Ini Heading 6</h6>

</body>

</html>

Hasil dari script di atas :

- HTML Paragraph

HTML Paragraph merupakan paragraf yang ada di dokumen itu sendiri.

Contoh Script HTML Paragraph :

<!DOCTYPE html>

<html>

<body>

<p>Ini merupakan paragraf</p>

<p>Di sin kita bisa menulis apapun yang kita mau</p>

</body>

</html>

Hasil dari script di atas :

- HTML Styles

HTML Styles merupakan settingan gaya dari elemen-elemen yang ada di HTML Document.

Seperti rambut punya hair stylish HTML Styles merupakan stylish untuk elemen-elemen tersebut.

Beberapa contoh HTML Styles adalah :

- - HTML Text Color

Untuk mengganti warna teks

- - HTML Text Font

Untuk mengatur jenis huruf

- - HTML Text Size

Untuk mengatur ukuran teks

- - HTML Text Alignment

Untuk mengatus posisi teks atau paragraf. Rata kanan, kiri, tengah atau kanan kiri.

Contoh Script HTML Styles :

<!DOCTYPE html>

<html>

<body>

<h1 style=text-align:center>Heading rata tengah</h1>

<p style=color:blue>Beberapa contoh dari HTML Styles</p>

<p style=font-family:algerian>Ini bisa termasuk juga didalam HTML CSS</p>

<p style=font-size:300%>Kalimat ini akan lebih besar 300% dari kalimat yang lain</p>

</body>

</html>

Hasil dari script di atas :

- HTML Formatting

HTML Formatting digunakan untuk memformat teks yang ada.

Beberapa tipe format teks nya adalah :

- - Bold Text

- - Important Text

Bold dan Important sama-sama lebih tebal tetapi yang important lebih ke pentingnya untuk search engine.

- - Italic Text

- - Emphasized Text

Italic dan Emphasized sama-sama menjadi miring dan yang emphasized sama seperti yang Important tadi yaitu untuk pentingnya di search engine bisa disebut sebagai keyword.

- - Marked Text

Teks yang diblok

- - Small Text

Teks yang lebih kecil dari teks yang lain

- - Deleted Text

Teks yang dicoret

- - Inserted Text

Teks bergaris bawah

- - Subscripts

Teks yang berada di bawah teks yang lain seperti dalam rumus kimia

- - Superscripts

Teks yang berada di atas teks yang lain seperti pangkat.

Contoh Script HTML Formatting :

<!DOCTYPE html>

<html>

<body>

<p><b>Contoh teks bold</b></p>

<p><strong>Contoh teks important</strong></p>

<p><i>Contoh teks Italic</i></p>

<p><em>Contoh teks emphasized</em></p>

<p><mark>Contoh marked teks</mark></p>

<p>Contoh <small>Small</small> Teks</p>

<p>Contoh <del>Deleted</del> Teks</p>

<p>Contoh <ins>Inserted</ins> Teks</p>

<p>Contoh <sub>Sucscripts</sub> teks</p>

<p>Contoh <sup>Superscripts</sup> Teks</p>

</body>

</html>

Hasil dari script di atas :

- HTML Quotation and Citation Element

HTML Quotation ini merupakan HTML yang digunakan untuk membuat sebuah kutipan kalimat dari sebuah website atau dari manapun untuk dimasukan sebagai materi di dalam postingan kita.

Yang ada di dalam HTML Quotation adalah :

- - Short Quotation

Untuk membuat kutipan pendek yang kurang dari 40 kata.

- - Long Quotation

Untuk membuat kutipan yang lebih dari 40 kata.

- - Abbreviations

Untuk mendefinisikan sebuah akronim atau singkatan.

- - Definitions

Definition merupakan elemen yang menjelaskan definisi sebuah istilah sebuah singkatan.

Ada 3 macam definitions yaitu

a. Jika attribut title ada di <dfn> maka <dfn> tersebut menjelaskan istilahnya.

b. Jika elemen <dfn> mengandung elemen <abbr> maka title abbr tersebut yang menjelaskan istilahnya

c. Jika tidak, konten <dfn> adalah istilahnya, dan elemen sebelumnya mengandung definisi.

- - Address

Untuk informasi dari pembuat dokumen

- - Work title

Keterangan dari sebuah pekerjaan

- - Bi-Directional Override

Merupakan elemen yang bisa merubah araf tulisan menjadi dari kanan ke kiri. Jika browsernya memadai, maka teksnya akan tertulis dari kanan ke kiri.

Contoh Script HTML Quotation :

<!DOCTYPE html>

<html>

<body>

<p>Peter F. Ducker berkata : <q>Hal yang terpenting dalam komunikasi adalah mendengarkan apa yang tidak dikatakan</q></p>

<p>Ini quote dari website WWF</p>

<blockquote>For 50 years, WWF has been protecting the future of nature.

The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote>

<p>Nasib persepakbolaan indonesia masih belum jelas jika <abbr title="Persatuan Sepakbola Seluruh Indonesia">PSSI dan Menpora tidak berdamai</p>

Ditulis oleh Anang Hariyanto.<br>

Kunjungi lah :<br>

anangsoko.blogspot.co.id<br>

Indonesia

</address>

<br>

<bdo dir=rtl>Teks ini akan ditulis dari kanan ke kiri</bdo>

</body>

</html>

Hasil dari script di atas :

- HTML Computer Code Formatting

HTML Computer Code Formatting digunakan untuk menampilkan teks berformat seperti kode komputer.

Macamnya ada :

- - Keyboard Formatting

Untuk menampilkan teks berformat input keyboard

- - Sample Formatting

Untuk menampilkan teks berformat sample output komputer

- - Code Formatting

Untuk menampilkan teks berformat sample kode program

- - Variable Formatting

Untuk menampilkan teks berformat variabel matematika.

Contoh Script HTML Computer Code Formatting :

<!DOCTYPE html>

<html>

<body>

<p>The syntax of this command is :</p>

<p><kbd>ACCOUNTS | COMPUTER | CONFIG | CONTINUE | FILE</kbd></p>

<samp>demo.example.com login: Mar 21 02:24:18

Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189</samp>

<p>Contoh kode program</p>

<code>

<pre>

CREATE TABLE baru

(nama CHAR(10),

Kelas CHAR(5),

NIM CHAR(10))

</pre>

</code>

<p>Einstein menjabarkan</p>

</body>

</html>

Hasil dari script di atas :

- HTML Comment

HTML Comment digunakan untuk memberi komen pada sebuah kode yang diperuntukan untuk para programmer agar mudah mengenali bagian-bagian dalam kode program. Comment tidak akan ditampilkan dalam browser. HTML Comment didefinisikan dengan

Contoh Script HTML Comment :

<!DOCTYPE html>

<html>

<body>

<!—Bagian penjelasan -->

<p>HTML Comment tidak akan ditampilkan di browser</p>

</body>

</html>

Hasil dari script di atas ;

- HTML CSS

HTML CSS sama dengan HTML Styles yaitu untuk mengatus format elemen dalam dokumen namun HTML CSS merupakan kumpulan dari HTML Styles yang ditulis dalam satu perintah.

Ada 3 jenis CSS yaitu :

1. - Inline CSS

Yaitu css yang ditulis langsung pada salah satu elemen

2. - Internal CSS

Yaitu css dimana semua kode ditulis dibagian atas, dan semua elemen yang bersangkutan akan langsung tersetting seperti yang ditulis

3. - Eksternal CSS

Yaitu css dimana kita memanggil settingan css dari luar html, misal css yang kita simpan di dokumen

Ada beberapa tambahan dalam HTML CSS yaitu class dan id. Dimana class dan id digunakan untuk mendefinisikan sebuah settingan, yang dapat dipanggil dalam sebuah html.

Contoh Script HTML CSS :

<!DOCTYPE html>

<html>

<head>

<style>

p { color:red;font-size:200%;font-family:algerian;}

p {border:1px solid black;}

p.class {color:yellow;}

p#p01 {background-color:yellow;color:black}

</style>

</head>

<body>

<h1 style=color:blue>Ini contoh HTML CSS</h1>

<p> Teks dari paragraf ini akan berwarna merah.</p>

<p class=class> Teks ini akan berwarna kuning</p>

<p id=p01> Lihat apa yang terjadi dengan background teks ini</p>

</body>

</html>

Hasil dari script di atas :

- HTML Links

HTML Links digunakan untuk menempatkan sebuah link pada kata, kalimat ataupun pada gambar yang akan mengarahkan kita ke website tertentu sesuai link yang ditentukan.

Kita bisa memberi efek pada link yang dibuat seperti warna aslinya merah, saat dikunjungi menjadi biru, saat terdapat kursor di atasnya menjadi warna kuning dan saat linknya aktiv menjadi warna hijau.

Ada juga target dari tujuan halaman link yang dituju antara lain :

- - _blank

Untuk membuka link di tab baru

- - _self

Untuk membuka link di tab itu sendiri

- - _parent

Untuk membuka link di tab sebelumnya

- - _top

Untuk membuka link full body

- - framename

Untuk membuka link di tab yang namanya ditulis

Kita juga bisa membuat link itu menuju ke bagian dari halaman tersebut menggunakan atribut id.

Contoh Script HTML Link :

<!DOCTYPE html>

<html>

<head>

<style>

a:link { color:red; background-color:transparent; text-decoration:none; }

a:hover { color:blue; background-color:transparent; text-decoration:underline; }

a:visited { color:green; background-color:transparent; text-decoration:none; }

a:active { color:pink; background-color:transparent; text-decoration:underline; }

</style>

</head>

<body>

<p><a href=HTML Attribute.html target=_blank>Link ini akan menuju ke halaman HTML Attribute dan akan dibuka di tab baru</a></p>

<p>Gambar di atas akan menuju ke link www.w3schools.com</p>

<p><a href=#B20>Lihat ke bagian 20</a></p>

<h2> Bagian 1</h2>

<h2> Bagian 2</h2>

<h2> Bagian 3</h2>

<h2> Bagian 4</h2>

<h2> Bagian 5</h2>

<h2> Bagian 6</h2>

<h2> Bagian 7</h2>

<h2> Bagian 8</h2>

<h2> Bagian 9</h2>

<h2> Bagian 10</h2>

<h2> Bagian 11</h2>

<h2> Bagian 12</h2>

<h2> Bagian 13</h2>

<h2> Bagian 14</h2>

<h2> Bagian 15</h2>

<h2> Bagian 16</h2>

<h2> Bagian 17</h2>

<h2> Bagian 18</h2>

<h2> Bagian 19</h2>

<h2> <a id=B20>Bagian 20</a></h2>

<h2> Bagian 21</h2>

<h2> Bagian 22</h2>

<h2> Bagian 23</h2>

<h2> Bagian 24</h2>

<h2> Bagian 25</h2>

</body>

</html>

Hasil dari script di atas :

- HTML Images

HTML Images digunakan untuk memuat gambar ke website kita. Di dalam HTML Images ada yang disebut sebagai alt attribute yaitu dimana jika gambar tidak berhasil dimuat akan muncul sebuah tulisan yang menjelaskan apa gambar yang akan dimuat tersebut. Kita juga bisa mengatur ukuran dari gambar tersebut dengan menggunakan width dan height. Terdapat juga image Floating gambar akan berada di samping teks, bisa samping kiri maupun kanan.

Contoh Script HTML Images :

<!DOCTYPE html>

<html>

<body>

<p><img src=w3schools.jpg alt=W3schools style=float:left> Jika kita ingin memberi gambar di samping paragraf kita bisa menggunakan style float</p>

</body>

</html>

Hasil dari script di atas :

- HTML Tables

HTML Tables digunakan untuk membuat tabel. Pembuatan tabel dalam html berurut per baris.

Beberapa istilah dalam HTML Tables adalah :

- <tr> = tabel row adalah baris tempat isi tabel berada

- <td> = Isi dari tabel tersebut

- <th> = Nama atau heading dari isi tabel tersebut

- <caption> Nama tabel

- rowspan dan colspan dimana 2 row/baris atau 2 kolom digabung menjadi 1

Tabel bisa diberi border ataupun tidak.

Contoh Script HTML Tables :

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td { border:1px solid black; border-collapse:collapse;}

</style>

</head>

<body>

<caption>Calon Ketua HMTI</caption>

<tr>

<th>Kelas</th>

</tr>

<tr>

</tr>

<tr>

<td>Rizal</td>

</tr>

</table>

<br>

<tr>

</tr>

<tr>

<td>Anang</td>

<td>Rubik</td>

<td>Gitar</td>

</tr>

<tr>

<td>Iqbal</td>

<td>Futsal</td>

</table>

</tr>

</body>

</html>

Hasil dari script di atas :

- HTML List

HTML List digunakan untuk membuat list-list item apa saja, seperti list barang-barang belanjaan, list barang pribadi dll.

Ada tiga jenis HTML list yaitu :

- - Unordered list

Dimana list tersebut tidak diurutkan atau diberi nomer urut

Ada 4 gaya unordered list antara lain :

a. Disc : Berbentuk lingkaran penuh

b. Circle : Berbentuk lingkaran bolong

c. Square : berbentuk kotak

d. None : tidak ada

- - Ordered list

Dimana list tersebut diurutkan dengan angka, alfabet ataupun angka romawi

- - Description list

Dimana list-list yang ada akan dideskripsikan kembali.

- List dapat juga dibuat horizontal dengan Horizontal List

- Ada juga list di dalam list disebut Nested HTML list.

Contoh Script HTML List :

<!DOCTYPE html>

<html>

<head>

<style>

ul#hor li{display:inline}

</style>

</head>

<body>

<li>Fanta</li>

<li>Sprite</li>

</ul>

<li>Fanta</li>

<li>Sprite</li>

</ol>

<dl>

<dt>Fanta</dt>

<dd>-Fanta Merah</dd>

<dd>-Jeruk</dd>

</dl>

<h2>List Horizontal</h2>

<li>Fanta</li>

<li>Sprite</li>

<li>Greensands</li>

</ul>

<ul>

<li>Fanta</li>

<ul>

<li>Fanta Merah</li>

<li>Fanta Putih</li>

</ul>

<li>Sprite</li>

</ul>

</body>

</html>

Hasil dari script di atas :

- HTML Block Elements

HTML Block Elements adalah html dimana isi dari dokumen html tersebut dibagi menjadi blok-blok atau bisa disebut dikelompokkan.

Untuk mengelompokan elemen-elemen digunakan perintah <div> dan ada juga <span> dimana yang dikelompokan itu berada dalam satu elemen atau inline.

Contoh Script Block Elements :

<!DOCTYPE html>

<html>

<body>

<p>Didalam hidup ini kadang ada hal yang tidak bisa diterima oleh akal sehat, contohnya adalah fenomena makhluk gaib, dan yang lebih sering dialami adalah perasaan <span style=font-size:150%;color:red>baper</span>. Perasaan ini tidak tahu mengapa datangnya, dan tidak bisa dijelaskan secara ilmiah</p>

</body>

</html>

Hasil dari script di atas :

- HTML Classes

HTML Classes digunakan untuk memberi style pada html dimana kita mengatur dulu bagaimana style yang akan digunakan lalu diberi nama apa aturan itu, baru saat membuat elemen-elemen kita bisa memanggil aturan tersebut untuk memberi style pada elemen yang kita buat.

Tag yang digunakan adalah class=”nama”

Contoh Script HTML Classes :

<!DOCTYPE html>

<html>

<head>

<style>

.par {background-color:black; color:white; }

.kal {font-size:150%; color:red }

</style>

</head>

<body>

<p class=par>Didalam hidup ini kadang ada hal yang tidak bisa diterima oleh akal sehat, contohnya adalah fenomena makhluk gaib, dan yang lebih sering dialami adalah perasaan <span class=kal>baper</span>.</p>

<p>Perasaan ini tidak tahu mengapa datangnya, dan tidak bisa dijelaskan secara ilmiah</p>

</body>

</html>

Hasil dari script di atas :

- HTML Layout

HTML Layout adalah dimana kita memberi desain layout pada dokumen kita.

Settingan umum dari layout adalah ada Header, Navigation, Section, Footer.

- Header adalah kepala atau judul dari dokumen kita.

- Navigation adalah kumpulan menu-menu yang ada di dokumen kita

- Section adalah isi dari dokumen kita

- Footer adalah keterangan dari dokumen kita.

Contoh Script HTML Layout :

<!DOCTYPE html>

<html>

<head>

<style>

#header {

background-color:black;

color:white;

text-align:center;

}

#nav {

line-height:30px;

background-color:lightgrey;

height:300px;

width:100px;

float:left;

padding:5px;

}

#section {

width:350px;

float:left;

padding:5px;

}

#footer {

background-color:black;

color:white;

clear:both;

text-align:center;

}

</style>

</head>

<body>

<h1>Rubik's Cube</h1>

</div>

Rubik<br>

Komunitas Rubik<br>

Organisasi Rubik<br>

</div>

<h2>Rubik</h2>

<p>

Rubik merupakan sebuah permainan berbentuk rubik, dibuat dengan bentuk pieces berukuran 3x3 pieces. Awalnya rubik ini diciptakan untuk media pembelajaran dalam matakuliah yang diajar oleh Erno Rubik pada tahun 1974.

</p>

</div>

</div>

</body>

</html>

Hasil dari script di atas :

- HTML Responsive Web

HTML Responsive Web adalah perintah yang digunakan untuk membuat halaman wes html yang responsive yang bisa berubah sesuai ukuran layar yang digunakan untuk membuka web tersebut.

Contoh Script HTML Responsive Web :

<!DOCTYPE html>
<head>
<style>
.respon{
float:left;
margin:5px;
padding:15px;
width:300px;
height:300px;
border:1px solid black;
}
</style>
</head>

<body>

<h1>Web Responsive</h1>
<h2>Mengubah ukuran halaman!</h2>
<br>

<div class="respon">
<h2>Rubik</h2>
<p>Rubik ditemukan oleh Erno Rubik pada tahun 1974 </p>
</div>

<div class="respon">
<h2>Organisasi rubik</h2>
<p>Organisasi yang menaungi rubik secara insternational adalah World Cube Association</p>
</div>

<div class="respon">
<h2>Komunitas Rubik</h2>
<p>Di Indonesia sendiri ada banyak komunitas rubik seperti, Komunitas rubik Malang, Jakarta Speedcuber dan masih banyak lagi.</p>
</div>

</body>
</html>

Hasil dari script di atas :

- HTML Iframe

HTML Iframe adalah perintah yang digunakan untuk menempatkan dokumen HTML ke dalam sebuah frame.Kita bisa mengatur ukuran frame tersebut sesuai selera.

Contoh Script HTML Iframe :

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Hasil dari script di atas :

- HTML Color Names

HTML Color Names merupakan nama-nama warna yang digunakan untuk mengubah warna elemen dalam dokumen html. Nama warna ditulis dalam bahasa inggris.

Beberapa contoh HTML Color Names :

Color	Name
	Red
	Orange
	Yellow
	Cyan
	Blue

- HTML Color Values

HTML Color Values merupakan warna yang didefinisikan dengan sebuah nilai. Ada 3 jenis nilai warna yaitu, 3 digit HEX, 6 digit HEX dan RGB.Nilai dalam HEX adalah dari 0-F. Nilai dalam rgb adalah dari 0-255.

Beberapa contoh Color Values :

Color	RGB
	rgb(255,0,0)
	rgb(255,255,0)
	rgb(0,255,0)
	rgb(0,255,255)
	rgb(0,0,255)

- HTML Color Shades

HTML Color Shades adalah warna kombinasi dari nilai yang sama besar dalam RGB. Color Shades ini memberikan efek gradasi dari hitam sampai putih. Jadi semakin besar nilainya warnanya akan menjadi putih.

Beberapa contoh Color Shades :

Color	RGB
	rgb(0,0,0)
	rgb(128,128,128)
	rgb(255,255,255)

- HTML JavaScript

HTML JavaScript adalah html yang menggunakan script javaScript di dalamnya.

Ada 2 tag dalam JavaScript :

- <script>

Dimana script ini akan berjalan jika browsernya mendukung JavaScript

- <noscript>

Dimana tulisan didalam tag <noscript> akan muncul pada browser yang tidak mendukung JavaScript

Contoh Script HTML JavaScript :

<!DOCTYPE html>

<html>

<body>

<h1>Contoh Script HTML JavaScript</h1>

<p id="contoh">Tulisan ini akan menjadi objek JavaScript nya</p>

function myFunction1(){

document.getElementById("contoh").innerHTML="Hai, ini contoh dari JavaScript";}

</script>

<button type="button" onclick="myFunction1()">Ganti Tulisan</button>

function myFunction2(){

document.getElementById("contoh").style.fontSize = "200%";}

</script>

<button type="button" onclick="myFunction2()">Ganti ukuran</button>

</body>

</html>

Hasil dari script di atas :

- HTML Head

HTML Head menjelaskan elemen-elemen yang bisa ditempatkan di tag <head>. Namun dalam pengaplikasiannya tag <head> bisa dihilangkan.

Beberapa tag dalam HTML head adalah :

- - <title>

Untuk memberi judul dokumen yang muncul di bagian tab.

- - <base>

Untuk memberi alamat atau target default pada sebuah link.

- - <meta>

Meta ini berisi metadata tentang dokumen HTML yang kita buat. Yang berfungsi untuk memberi deskripsi tentang dokumen kita agar mudah saat dicari di search engine.

Contoh Script HTML Head :

<!DOCTYPE html>

<html>

<head>

<title>Rubik's Cube</title>

</head>

<body>

<p>Rubik adalah sebuah permainan yang diciptakan oleh Erno Rubik pada tahun 1974</p>

<a href="HTML Attribute.html">Link tentang Rubik</a>

</body>

</html>

Hasil dari script di atas :

- HTML Entities

HTML Entities merupakan beberapa simbol yang beberapa tidak ada di keyboard komputer maupun laptop yang bisa dipanggil dengan menggunakan kode.

Kode-kode tersebut ada 2 jenis yaitu :

- - Entity name

Nama dari entity yang akan dipanggil

- - Entity number

Nomor yang mendifinisikan entity tersebut

Beberapa contoh entities :

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

- HTML Symbols

HTML Symbols sama seperti HTML Entities yaitu menampilkan simbol yang tidak ada di keyboard komputer maupun laptop. Kode yang digunakan pun sama yaitu entity name dan entity number.

Beberapa contoh symbols :

Char	Number	Entity	Description
∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS
∅	∅	∅	EMPTY SETS
∇	∇	∇	NABLA
∈	∈	∈	ELEMENT OF
∉	∉	∉	NOT AN ELEMENT OF
∋	∋	&ni;	CONTAINS AS MEMBER
∏	∏	∏	N-ARY PRODUCT
∑	∑	∑	N-ARY SUMMATION

Contoh Script HTML Entities & HTML Symbols :

<!DOCTYPE html>

<html>

<body>

<h2>Contoh Script HTML Entities & HTML Symbols</h2>

<p>Nilai tukar rupiah dengan US$ semakin melemah berdampak juga pada mata uang yang lain seperti EUR&#8364 dan JPN&yen.</p>

<p>Copyright &copy Anang Soko</p>

</body>

</html>

Hasil dari script di atas :

- HTML Charset

HTML Charset digunakan untuk mengatur jenis karakter apa yang digunakan dalam HTML kita. Karena tidak semua karakter terdapat di jenis karakter tertentu.

Beberapa jenis karakter/charset antara lain :

- -- ASCII

- -- ANSI

- -- ISO-8859-1

- -- UTF-8

- HTML URL Encoding

HTML URL Encoding adalah penjelasan tentang pengkodean sebuah URL atau biasa dikenal dengan alamat web. URL Sendiri adalah singkatan dari Uniform Resource Locator yaitu sebuah kode yang digunakan untuk mencari lokasi sumber sebuah web yang dikemas secara rapi.

Bentuk umum dari URL adalah seperti berikut :

scheme://host.domain:port/path/filename

* scheme - mendefinisikan tipe Layanan internet (paling umum adalah http)

* host - mendifinisikan host dari sebuah domain (host asli untuk http adalah www)

* domain - mendefinisikan nama domain

* port - mendefinisikan nomor port yang dilalui

* path - mendefinisikan lokasi file disimpan

* filename - mendefinisikan nama file yang dicari

» Thanks for reading: HTML (HyperText Markup Language)

Latest News and Artikel

HTML (HyperText Markup Language)