Pengenalan dan Beberapa Dasar dari HTML 5

HTML5 adalah bahasa pemrograman untuk penataan dan penyajian konten untuk Web. HTML5 adalah penyempurnaan dari standar yang sebelumnya pernah dikeluarkan oleh W3C (World Wide Web Consortium)

Banyak sekali tambahan dari standard sebelumnya. Diantaranya adalah adanya tambahan element seperti : Canvas, Video, Audio. Juga penambahan pada tag di web form serta misalnya section dll. Prinsipnya lebih memudahkan untuk dibaca dan dimengerti oleh manusia.

Beberapa browser yang sudah mendukung HTML5 adalah Chrome, Firefox, Opera dan Internet Explorer.

Berikut dibawah ini saya akan mengenalkan beberapa kode HTML 5:

  • DEKLARASI

Sebelum menuju inti dalam membuat HTML5, harus disisipkan deklarasi HTML5 agar browser dapat membaca apakah web tersebut menggunakan HTML5 atau bukan. Karena tanpa deklarasi, kita tidak akan menikmati HTML5 secara keseluruhan.

Kode:

<!DOCTYPE HTML>

  • KODE BUKA DAN AKHIR
Dalam membuat sebuah tag/kode html, harus ada awalan dan akhir. Setiap menulis kode harus ditutupi/diakhiri agar bisa dibaca oleh browser.
Kode:
<kode> (untuk mengawali)

</kode> (untuk mengakhiri)

  • HTML

Dalam awal membuat sebuah HTML, diharuskan membuat tag <html> sebagai dasar pembuatan HTML, karena tanpanya web browser tidak akan mengenali itu sebuah HTML.

Kode:

<html> (untuk mengawali)
</html> (untuk menutupi)

Didalam <html>, terdapat dua inti dalam membuat HTML, yaitu HEAD dan BODY

  • HEAD

Head adalah awal dari sebuah HTML sebagai pengenal dari HTML

Kode:

<head>

</head>

  • BODY

Body adalah isi dari bagian dari HTML, dibagian ini bisa disisipkan berbagai konten yang akan dimasukan.

Body adalah bagian dari <html> dan diletakan dibawah <head>

Kode:

<body>

</body>

Kita sekarang akan membuat isi dari <head>. Didalam <head> bisa disisipkan kode <title> dan <meta name/>

  • TITLE

Title berfungsi sebagai judul  dari HTML tersebut dan ditampilkan di bagian Title Bar dari browser.

Kode:

<title>Nama Judul</title>

  • METANAME

Metaname berfungsi agar search engine dapat mengenali web yang akan dibuat.

Kode:

<meta name=”author” contents=”Nama Pemilik” />

<meta name=”keywords” contents=”HTML5″ />

Kita sekarang akan membuat isi dari <body>. Di bagian ini kita bisa mensisipkan banyak kode-kode HTML yang akan dibuat, berikut diantaranya adalah:

  • PARAGRAF

Untuk membuat sebuah paragraf dalam sebuah HTML dapat digunakan:

Kode:

<p>

…Isi paragraf…

</P

  • HEADING

Heading berfungsi sebagai judul dari isi web tersebut.

Kode:

<h1>Judul</h1>

<h2>Judul</h2>

<h3>Judul</h3>

<h4>Judul</h4>

<h5>Judul</h5>

<h6>Judul</h6>

<h1> adalah tulisan dengan ukuran paling besar dan <h6> adalah tulisan dengan ukuran terkecil.

  • UN-ORDERED LIST

Un-Ordered List adalah membuat urutan yang tidak berutan, tidak ada penomoran angka dalam urutan ini.

Kode:

<ul>

<li>isi 1</li>

<li>isi 2</li>

Dst…

</ul>

  • ORDERED LIST

Ordered List adalah membuat urutan yang berutan, membuat urutan dengan penomoran angka.

Kode:

<ol>

<li>isi 1</li>

<li>isi 2</li>

Dst…

</ol>

  • DEFENITION LIST

Defenition List berfungsi membuat teks menjorok kedalam.

Kode:

<dl>

<dt>..isi..</dt>

<dd>..isi..</dd>

<dt>..isi..</dt>

<dd>..isi..</dd>

</dl>

  • HYPERLINK

Hyperlink berfungsi untuk sebagai pintasan menuju bagian/halaman berikutnya.

Kode:

<a href=”namafile.html”>..Judul Hyperlink..</a>

(Untuk “namafile.html” harus berada dalam satu folder dimana file induk berada)

  • TABLE

Dalam membuat table agak sedikit rumit dan butuh ketelitian. Disini saya akan menjelaskan beberapa bagian dari table:

Kode:

<table> (untuk mengawali sebuah table)

<tr> (untuk mengawali sebuah baris)

<th>(ini merupakan sebuah heading dari table)</th>

</tr>(untuk mengakhiri sebuah baris)

<tr>(untuk mengawali sebuah baris)

<td colspan=”3″>(colspan berfungsi untuk merge beberapa kolom)</td>

</tr>(untuk mengakhiri sebuah baris)

<tr>(untuk mengawali sebuah baris)

<td rowspan=”2″>(rowspan berfungsi untuk merge beberapa baris)</td>

</tr>(untuk mengakhiri sebuah baris)

</table>(untuk mengakhiri sebuah table)

 

  • MENYISIPKAN GAMBAR

Kode:

<img src=”namafile.jpg”  alt=”namagambar” />

Itulah beberapa kode-kode dasar dari HTML5. Masih banyak kode-kode HTML yang tersedia. Tidak semua kode saya bisa tampilkan karena banyak😀

Untuk kode yang lain bisa anda cari dan kembangkan sendiri ^^

Situs referensi: http://www.w3schools.com/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s