Pengertian dan Penggunaan HTML

Posted by : JerrySky Minggu, 03 Mei 2015

Pengertian HTML

Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ).
Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
Penanagan kesalahan yang lebih baik
Lebih markup untuk menggantikan scripting
HTML5 merupakan perangkat mandiri
Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

Unsur kanvas untuk menggambar
Video dan elemen audio untuk media pemutaran
Dukungan yang lebih baik untuk penyimpanan secara offline
Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.
cara membuat html design

Pemberian Catatan/Komentar pada Dokumen HTMLCatatan adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan
catatan/komentar dalam kode HTML adalah sebagai keterangan yang berguna untuk
pembaca kode. Misalnya, catatan digunakan untuk memberikan catatan apa saja dan
bahkan bisa mencakup beberapa baris.
Komentar.html

<html>
<head>
<title>Hai</title>
<Body>

Saya Sedang Belajar HTML
</body>
</html>

Penggunaan Tag Break Row (pindah baris)
Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata
lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas
sekarang perhatikan contoh berikut ini :
Breakrow.html
<html>
<head>
<title>belajar tag br</title>
</head>
<body>
Mudah-mudahan anda cepat bisa belajar HTML <br>
Amin …!
</body>
</html>
Penggunaan Tag Paragraf
Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan
paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih
jelasnya perhatikan contoh di bawah ini.
Paragraf1.html
<html>
<head>
<title>belajar tag paragraf</title>
</head>
<body>
Senja Telah Tiba<p>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus dari samudera<br>
Pertanda malam telah tiba
</body>
</html>
Atribut Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur
peletakan teks di dalam masing-masing baris. Sebagai contoh : tambahkan pada kode
HTML di atas dengan kode seperti yang terlihat pada contoh program HTML berikut :
Paragraf2.html
<html>
<head>
<title>belajar tag paragraf</title>
</head>
<body>
Senja Telah Tiba
<p align = “center”>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus ke samudera<br>
Pertanda malam telah tiba<br>
</p>
Bandar Lampung, 2004
</body>
</html>
Penggunaan Tag CenterUntuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan untuk
mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita
perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah :
</center>. Untuk jelasnya perhatikan latihan di bawah ini :
center.html
<html>
<head>
<title>belajar tag center </title>
</head>
<body>
<center>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% align = left noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</center>
</body>
</html>
Penggunaan Tag Heading
Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam
badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling
besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling
kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih
dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena
standarnya adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang
terbesar sampai terkecil dapat dilihat pada tatacara penulisan berikut ini :
<H1> … </H1> (Heading 1)
<H2> … </H2> (Heading 2)
<H3> … </H3> (Heading 3)
<H4> … </H4> (Heading 4)
<H5> … </H5> (Heading 5)
<H6> … </H6> (Heading 6)

Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
heading.html
<html>
<head>
<title>belajar tag heading</title>
</head>
<body>
<h1>ukuran heading 1</h1>
<h2>ukuran heading 2</h2>
<h3>ukuran heading 3</h3>
<h4>ukuran heading 4</h4>
<h5>ukuran heading 5</h5>
<h6>ukuran heading 6</h6>
</body>
</html>

seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang
bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify.
Cara menuliskan pada dokumen HTML adalah <h1 align=”center”>.

Menampilkan Garis Horisontal (Horizontal Row)Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat
dokumen web sering menambahkan garis horisontal biasanya diletakkan di bawah
sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali,
caranya yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr> juga bisa
ditambahkan atribut-atribut seperti berikut ini :
Size : Untuk mengubah ketebalan garis
Width : Untuk merubah lebar garis
Align : Untuk mengatur tata letak teks dalam baris
Noshade : Untuk merubah garis yang dibuat tidak disertai bayangan
Berikut adalah contoh kode HTML yang menggunakan tag ini :
Garis.html
<html>
<head>
<title>belajar membuat garis </title>
</head>
<body>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% align = left noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</body>
</html>

Penggunaan Tag Divisi
Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe
sama. Fungsinya bisa juga disamakan dengan tag <P>. perhatikan pada contoh berikut
ini :

Divisi.html
<html>
<head>
<title>belajar tag div </title>
</head>
<body>
<div align=”right”>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145
</div>
</body>

</html>