Pengantar HTML 5 Dasar

PENGENALAN HTML 5
Html adalah kependekan dari hypertext markup language yang berarti sebuah bahasa
markah yang digunakan untuk menampilkan data dan informasi pada penjelajah web
internet, selain itu juga digunakan untuk membuat dokumen web. Format hypertext
ditulis dalam berkas format ASCII agar dapat menampilkan wujud yang terintegrasi.
Awalnya html merupakan perkembangan dari sebuah bahasa yang banyak digunakan
pada dunia penerbitan dan percetakan yang disebut dengan SGML (Standard
Generalized Markup Language). Html merupakan sebuah bahasa standard yang
digunakan untuk pembuatan web. Html adalah standard internet yang didefinisikan dan
dikendalikan penggunaannya oleh W3C (World Wide Web Consortium). Html pertama
kali dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja
di CERN pada tahun 1989. Untuk html saat ini sudah mempunyai versi yang kelima alias
html 5.
Web Hypertext Application Technology Working Group ( WHATWG) mulai membuat
standar baru ini pada tahun 2004 ketika W3C sedang fokus pada pengembangan XHTML
2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000.
Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5
setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.
Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5
baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa
dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk
menyaksikan video atau menyaksikan konten apapun di web."

PENULISAN DASAR HTML 5
Dasar html 5 berbeda dengan penulisan html biasa dan xhtml, perbedaannya sangat
jelas dimana html cuma mendeklarasi bahwa dokumen tersebut adalah dokumen html
sedangkan html biasa dan xhtml setiap dokumennya harus mempunyai tautan ke
website penerbitnya. Namun kita tidak membahas dan mempelajari xhtml tetapi disini

akan membahas html biasa sampai html 5.
berikut ini adalah bentuk dasar dan bersamaan deklarasi html 5 yang populer
digunakan pada zaman sekarang ini.

<!DOCTYPE html>
<head>
<title>Judul Website</title>
</head>
<body>

</body>
</html>

Penjelasan tag html diatas :
1. <!DOCTYPE html> digunakan untuk mendeklarasi html 5
2. <head> digunakan untuk meletakan tag meta, link, style dan script, bisa disebut
juga untuk pengontrol dokumen html itu sendiri
3. <title> digunakan untuk judul pada tab bar browser
4. <body> digunakan untuk menaruh tag konten, layout atau penampilan data dan
informasi
5.  digunakan untuk menulis komentar pada dokumen html

PENULISAN TAG HTML 5
Bentuk-bentuk html yang akan kita pelajari kedepan adalah membuat langkah demi
langkah untuk menuju kepada sebuah website. Dimana nantinya akan dipelajari
bagaimana cara menulis dan mengerti untuk apa sesuatu tag html tetapi dengan
menggunakan langkah per projek yang artinya tiap tiap langkah harus ada bahan yang
dipraktekkan agar membuat pelajar tidak kebingungan dan akan membuat pelajar tahu
mana yang harus ia ingat.

Kebanyakan pemula lebih suka projek dibandingkan dijelaskan satu persatu, ini
dikarenakan dengan membuat projek akan memudahkan seseorang dalam belajar
karena ia tahu apa yang harus dilakukan agar program yang dibuatnya berjalan sesuai
kehendak atau bisa juga dengan menggunakan kode projek yang dipelajari tersebut
untuk digunakan kembali atau daur ulang.

Tag Meta
Tag meta merupakan tag yang digunakan untuk informasi siapa penulisnya, kata kunci
yang digunakan pada dokumennya dan deskripsi untuk merangkum informasi menjadi
lebih sederhana, deskripsi harus mencerminkap dokumen html tersebut.
Selain itu tag meta juga sangat berguna bagi search engine karena dengan ada meta
maka akan memudahkan penulusuran web dan memudahkan setiap orang mengakses
search engine dalam menemukan dokumen html tersebut.
<!DOCTYPE html>
<html>
<head>
<title>HTML Basic tags</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<meta name="Keywords" content="html, html5, website, belajar web"
/>
<meta name="description" content="Dokumen ini digunakan untuk
pemula" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="2 days" />
<meta name="language" content="id-ID" />
<meta name="geo.country" content="id" />
<meta name="geo.placename" content="Indonesia" />
<meta name="distribution" content="global" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="rating" content="general" />
<meta name="author" content="Ghazali" />
</head>
<body>
</body>
</html>
penjelasan tag meta diatas :
1. http-equiv adalah untuk menentukan apakah dokumen html tersebut

2. keywords adalah kata kunci yang ada dalam dokumen html tersebut
3. deskripsi merupakan penjelasan secara singkat mengenai data dan informasi
yang digunakan pada dokumen html tersebut
4. robots digunakan untuk dapat dicari melalui search engine
5. revisit-after digunakan untuk memperbaharui counter pengunjung
6. language adalah bahasa yang digunakan, geo.country adalah singkatan wilayah
atau daerah yang mencakup negara juga, geo.placename adalah nama suatu
daerah berdasarkan geo.country.
7. Distribution adalah halaman atau dokumen tersebut yang dipublikasikan ke
internet
8. author adalah penulis dokumen html

Text Heading
Text heading merupakan format atau cara membuat text untuk judul artikel atau untuk
membedakan mana text biasa dengan text khusus. Selain itu text heading juga
digunakan untuk menampilkan judul website, seringkali diletakkan pada header
bersamaan dengan deskripsinya.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Text Heading 1</h1>
</body>
</html>

Format Text
Format text adalah tata cara penulisan text baik itu dipandang dari sisi paragraf atau
dari bentuk huruf ataupun text yang berlink. Dengan adanya format text ini maka akan
memudahkan seseorang dalam menebal, miring, underline, overline atau yang lainnya.
Namun format text ini dapat digantikan dengan menggunakan css.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p> Tag ini adalah<br/>paragraf<br/>dengan baris baru</p>
<p> Tag ini adalah<br/>paragraf<br/>dengan baris baru</p>
<b> Tag ini digunakan untuk penebalan text </b>
<em> Tag ini digunakan untuk pemiring text </em>
<i> Tag ini digunakan untuk pemiring text </i>
<small> Tag ini digunakan untuk mengecil text </small>
<strong> Tag ini digunakan untuk membesar text </strong>
<sub> Tag ini digunakan untuk subscript text </sub>
<sup> Tag ini digunakan untuk superscript text </sup>
<ins> Tag ini digunakan untuk insert text </ins>
<del> Tag ini digunakan untuk delete text </del>
<mark> Tag ini digunakan untuk menandai text </mark>
<code> Tag ini digunakan untuk text kode komputer </code>
<kbd> Tag ini digunakan untuk keyboard text </kbd>
<samp> Tag ini digunakan untuk sampel kode komputer </samp>
<var> Tag ini digunakan untuk variabel </var>
<pre> Tag ini digunakan untuk text bebas </pre>
<abbr> Tag ini digunakan untuk abbreviation atau acronym </abbr>
<address> Tag ini digunakan untuk informasi pemilik dokumen
</address>
<bdo> Tag ini digunakan untuk text direction </bdo>
<blockquote> Tag ini digunakan untuk text quote yang diblok
</blockquote>
<q> Tag ini digunakan untuk inline (short) quotation </q>
<cite> Tag ini digunakan untuk judul pada pekerjaan </cite>
<dfn> Tag ini digunakan untuk definisi </dfn>
<a href="http://www.google.com/">Link text</a>
<a href="http://www.google.com/" target="_blank">Link text</a>
</body>
</html>

Elemen Blok, Gambar Dan Iframe
Elemen blok adalah bentuk tag yang digunakan untuk memblok sesuatu dalam blok
tersebut selain itu blok ini juga dapat membuat elemen dengan bantuan css. Ada
beberapa tag html blok ini diantaranya adalah div dan span. Tag div adalah tag html
blok yang digunakan untuk membuat layout website dengan bantuan css sedangkan tag
span cuma untuk memblok area text saja dengan bantuan css juga.
Tag gambar merupakan tag yang digunakan untuk menampilkan suatu gambar ke
halaman web. Tag iframe digunakan untuk menampilkan file kedalam file dimana
sebuah file html bisa ditampilkan juga dalam file html lain.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div><img src="melody.jpeg" width="100px" align="left"/>Elemen
blok adalah bentuk tag yang digunakan untuk <span>memblok sesuatu
dalam blok</span> tersebut selain itu blok ini juga dapat membuat
elemen dengan bantuan css. Ada beberapa tag html blok ini
diantaranya adalah <span>div dan span<span>. Tag div adalah tag
html blok yang digunakan untuk membuat layout website dengan
bantuan css sedangkan tag span cuma untuk memblok area text saja
dengan bantuan css juga.</div>
<iframe src="dokumen.pdf" width="100%" height="330px"> </iframe>
</body>
</html>
Penjelasan tag elemen diatas:
1. <div> merupakan kerangka layout website
2. <span> merupakan text blok
3. <img> merupakan tag yang digunakan untuk menampilkan gambar, penulis
disini mengunakan gambar melody.jpeg yang letaknya bersamaan dengan file
dokumen html
4. <iframe> merupakan tag untuk menampilkan output apakah file itu html atau
file yang lain namun penulis disini menggunakan file dokumen.pdf yang terletak
bersamaan file dokumen html

Tabel
Tabel adalah hal yang wajib ada dalam sebuah web maupun program aplikasi lainnya
dengan adanya tabel maka akan memudahkan dalam hal penampilan data. Biasanya
tabel digunakan pada halaman administrasi untuk pengeditan dan penghapusan data.
Dulu tabel digunakan sebagai layout website untuk merapikan dan menciptakan elemen
yang berbeda agar tampil sebuah website yang rapi.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th>row 1, cell 1</th>
</tr>
<tr>
<td>row 2, cell 1</td>
<td rowspan="4" valign="middle" align="center">rowspan 4</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">colspan 2</td>
<td colspan="2">colspan 2</td>
</tr>
<tr>
<td colspan="4" align="center">colspan 4</td>

</tr>
</table>
</body>
</html>

Penjelasan tag tabel diatas:
1. <table> merupakan tag tabel, <tr> merupakan baris, <th> adalah kolom kepala
dari sebuah tabel data, dan <td> merupakan kolom
2. boder merupakan garis tersebut, cellpadding dan cellspacing adalah ketebalan
dan batas dalam dan luar
3. colspan adalah merge atau gambungkan beberapan kolom, align merupakan
letak text maupun object menjadi center, left dan right
4. rowspan adalah merge untuk beberapa baris, valign merupakan letak vertikal
dari align dengan value top, middle dan bottom

Form
Form adalah formulir yang digunakan untuk memasukkan data atau pengimputan data.
Form wajib ada jika seseorang ingin membuat aplikasi database dan aplikasi
pendaftaran. Form pada html banyak sekali tata cara penulisan dan banyak juga yang
belum di support pada browser karena form yang akan dibahas dimulai dari form html
biasa sampai html 5, jadi saran penulis agar yang baik gunakan browser opera karena
99% support form html 5, kalaupun tidak ada gunakan saja safari (mac) atau chrome
(linux, windows, mac).
Tata cara penulisan form biasa disini penulis menggunakan semua form html 4 yang
masih didukung pada html 5, dengan form biasa memang sebenarnya sudah
mencukupi.

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<form action="" method="">
<fieldset>
<legend>Formulir</legend>
<p>
<label>Nama Depan</label>
<input type="text" name="namadepan">
</p>
<p>
<label>Password</label>
<input type="password" name="namadepan">
</p>
<p>
<label>Kelamin</label>
<input type="radio" name="sex" value="pria" checked>Pria
<input type="radio" name="sex" value="wanita">Wanita
</p>
<p>
<label>Pilih Kesukaan</label>
<input type="checkbox" name="vehicle" value="Bike" checked>I
have a bike
<input type="checkbox" name="vehicle" value="Car">I have a
car
</p>
<p>
<label>Pilih Pekerjaan</label>
<select>
<option>IT</option>
<option>Developer</option>
<option>Junior Programmer</option>
<option>Senior Programmer</option>
<option>IT Support</option>
<option>Database Manager</option>
</select>
</p>
<p>
<label>Pekerjaan Sampingan</label>
<select multiple="4">
<option>IT</option>
<option>Developer</option>
<option>Junior Programmer</option>
<option>Senior Programmer</option>
<option>IT Support</option>
<option>Database Manager</option>
</select>
</p>
<p>
<label>Keterangan</label>
<textarea></textarea>
</p>
<p>
<input type="submit" value="Submit">

<input type="reset" value="Bersih">
<input type="button" value="Button">
<button>Back</button>

</p>
</fieldset>
</form>
</body>
</html>

Untuk form html 5 memang dibuat sangat canggih dan mendukung kinerja pembuat
program web namun yang jadi permasalahan tidak semua browser mendukung form
html 5. jadi sebaiknya gunakan form diatas karena mendukung semua browser. Tetapi
jika berminat silahkan lihat tag form html 5 dibawah ini.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input type="color" name="favcolor">
<input type="date" name="bday">
<input type="datetime" name="bdaytime">
<input type="datetime-local" name="bdaytime">
<input type="email" name="email">
<input type="month" name="bdaymonth">
<input type="number" name="quantity" min="1" max="5">
<input type="range" name="points" min="1" max="10">
<input type="search" name="googlesearch">
<input type="tel" name="usrtel">
<input type="time" name="usr_time">
<input type="url" name="homepage">
<input type="week" name="week_year">
<input type="image" src="img_submit.gif" alt="Submit" width="48"
height="48">
<input type="text" name="fname" placeholder="First name">
<input type="text" name="usrname" required>
<input type="number" name="points" step="3">
</form>
</body>
</html>

Dibawah ini adalah bentuk lain dari yang dipelajari diatas. Selain itu dibawah ini lebih ke
form atribut dimana atribut yang digunakan belum ada pada html biasa bisa disingkat
atribut form html 5, Untuk tagnya lihat dibawah ini.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<br/>
<form action="" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
<br/>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
<p><br/><br/></p>

<form action="" autocomplete="on">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email"
autocomplete="off"><br>
</form>
<br/>
<form action="" novalidate>
E-mail: <input type="email" name="user_email">
</form>
<br/>
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formmethod="post" formtarget="_blank"
formenctype="multipart/form-data" formaction="" value="Submit as
admin">

</form>
<br/>
</body>
</html>

List
List biasanya digunakan pada web untuk menu baik itu pada menu navigasi atas
maupun menu yang terletak pada sidebar. Unorder list atau ul digunakan untuk list
yang bersifat tidak berurutan dan sebagi simbolnya biasanya circle, square, dan
lain-lain.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
<li>Coklat</li>
<li>Crim</li>
<li>Es Campur</li>
</ul>
<br/>
</body>
</html>

Order list atau ol digunakan untuk membuat atau menampilkan data yang berurutan
sesuai angka dan angka menjadi simbolnya atau iconya baik angka arab maupun
romawi.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>

<li>Coklat</li>
<li>Crim</li>
<li>Es Campur</li>

</ol>
<br/>
</body>
</html>

Deskripsi list atau dl digunakan untuk menjelaskan kegunaan list tersebut, selain itu
juga bisa digunakan untuk format penulisan artikel.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<dl>
<dt>Kopi</dt>
<dd>Warnanya hitam</dd>
<dt>Teh</dt>
<dd>Warnanya coklat kemerahan</dd>
<dt>Susu</dt>
<dd>Warnanya putih</dd>
<dt>Coklat</li>
<dd>Warnanya coklat hitam</dd>
<dt>Crim</dt>
<dd>Warnanya agak kuning</dd>
<dt>Es Campur</dt>
<dd>Rasanya dingin dan manis bercampur</dd>
</dl>
<br/>
</body>
</html>

Audio
Audio digunakan disini agar bisa digunakan untuk pemutaran audio pada website
disebuah browser. Ada beberapa format yang didukung untuk menampilkan audio
player pada browser yaitu ogg, mp3 dan wav. Kebanyakan audio ditampilkan pada
sebuah website diinternet dihilangkan playernya.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
</body>
</html>

Video
Video juga sama halnya dengan audio sama sama digunakan pada website dengan
video player. Selain itu dengan menggunakan video player html lebih fleksibel
dibandingkan menggunakan flash player dan jika kita menggunakan flash untuk hanya
membuat video player saja kan rugi karena harga yang meraung kocek lebih sejuta.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video width="520" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>

Pengantar HTML 5 Dasar

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Pengantar HTML 5 Dasar

Similar to Pengantar HTML 5 Dasar (20)

Recently uploaded

Recently uploaded (20)

Pengantar HTML 5 Dasar