Kali
ini akan membahas mengenai dasar-dasar pada HTML akan tetapi kali ini dengan
menggunakan HTML5. Kenapa HTML5 ? Apa bedanya HTML5 dengan versi HTML yang
sebelumnya ?
PERBEDAAN HTML5 DENGAN VERSI SEBELUMNYA
Menurut
beberapa sumber di internet, perbedaan HTML5 dengan HTML versi sebelumnya
adalah Pada HTML5 menambahkan
unsur-unsur baru yang digunakan untuk secara khusus mengidentifikasi
masing-masing konstruksi umum :
- Section: Sebuah bagian atau bab dalam sebuah buku, sebuah bagian dalam sebuah bab, atau pada dasarnya apa pun yang memiliki pos sendiri dalam HTML4.
- Header: Element header mengandung informasi awal dari sebuah seksi atau halaman. Ini bisa mengacu pada dokumen kita hingga seluruh isi konten.
- Nav: Element nav digunakan untuk menampung link menuju halaman lain, atau menuju bagian lain di halaman yang sama.
- Article: Sebuah entri independen dalam sebuah blog, majalah, ringkasan, dan sebagainya.
HTML5
HTML adalah singkatan dari ( Hyper Text Markup Language ), merupakan sebuah bahasa yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajahan web di Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
Pada HTML5 untuk memulai atau mengawali membuat
situs HTML seharusnya diawali dengan root <!DOCTYPE
html>, Skrip root tersebut mendefinisikan bahwa halaman yang akan dibuat
menggunakan HTML5, Skrip root dapat ditulis sebagai berikut :
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype
html>
<!Doctype Html>
STRUKTUR DASAR HTML5
Sebenarnya untuk struktur HTML5 tidak terlalu berbeda dengan struktur HTML standar. Di HTML5 pada penulisan tag bisa menggunakan huruf kecil (LOWERCASE) atau huruf besar (UPPERCASE) dan selalu mengunakan penutup tag ( Contoh </p> ).
Yang membedakan
secara pokok antara HTML dan HTML5 adalah:
- Elemen HTML5 harus saling tertutup. Elemen yang mempunyai pasangan tag harus harus ditutup dengan penutupnya. <p> Paragraf </p> <p> ………… </p> Elemen yang tidak memiliki penutup ditutup dengan </>. Break <br /> <img src=”xxxxx” />
- Elemen pada HTML5 dapat ditulis dengan menggunakan hiruf kecil ataupun menggunakan huruf besar. Contoh : <head> atau <HEAD>.
- Pada dokumen HTML5 harus memiliki satu root elemen.
HALAMAN WAJIB HTML5
Pada halaman HTML5
harus ada deklarasi DOCTYPE (<!DOCTYPE
html>). Dalam dokumen HTML5 elemen head dan body harus ada, sedangkan elemen
title harus diletakkan didalam elemen head, itulah beberapa syarat yang harus
ada dalam dokumen HTML5.
HTML5 -> DOCTYPE -> Head -> Body
Contoh minimal sebuah
dokumen HTML5 :
<!DOCTYPE html>
<head>
<title>Contoh Dokumen Html</title>
</head>
<body>….</body>
</html>
KODE WARNA
Dalam pengaturan
warna bisa menggunakan nama warna dalam bahasa inggris atau dengan menggunakan
kode RGB yang mana ditampilkan dalam nilai heksadesimal. Berikut ini adalah
beberapa contoh code warna :
Color
|
Hexadecimal
|
Color
|
Hexadecimal
|
White
|
#FFFFFF
|
Blue
|
#0000FF
|
Black
|
#000000
|
Magenta
|
#FF00FF
|
Red
|
#FF0000
|
Cyan
|
#00FFFF
|
Green
|
#00FF00
|
Yellow
|
#FFFF00
|
Violet
|
#9F5F9F
|
Chocolate
|
#5C3317
|
Aquamarine
|
#70DB93
|
Pink
|
#FF6EC7
|
ATRIBUT-ATRIBUT ELEMEN
Tag
Dasar Dokumen
|
|
<!Doctype html></html>
|
Untuk menunjukkan awalan dan akhiran pada HTML5
|
<head></head>
|
Untuk menunjukkan dagian dari dokumen yang
berisikan informasi format penting yang tidak terlihat.
|
<body></body>
|
Untuk mendefinisikan bagian dari dokumen yang
berisi informasi yang terlihat.
|
Atribut
Body
|
|
<body bgcolor=”xxx”>
|
Untuk menentukan warna latar belakang
|
<body text=”xxx”>
|
Untuk menentukan warna text.
|
<body link=”xxx”>
|
Menentukan warna link
|
Tag
Text
|
|
<h1></h2>…..<h6></h6>
|
Untuk menampilkan ukuran text dari yang terkecil
H1 sampai H6.
|
<b></b>
|
Untk menampilkan text dengan huruf tebal.
|
<i></i>
|
Untuk menampilkan text dengan dengan huruf
miring.
|
<u></u>
|
Untuk menampilkan text dengan dengan huruf garis
bawah.
|
<em></em>
|
Untuk memberikan penekan pada text yang
diberikan, biasanya sebagai huruf miring terkadang huruf tebal, tergantung
browser yang digunakan.
|
<strong></strong>
|
Untuk menampilkan text dengan huruf tebal kuat
|
<font size=”xx”></font>
|
Untuk menentukan ukuran text.
|
<font color=”xxx”></font>
|
Untuk menentukan warna text.
|
Format
Umum Tags
|
|
<p></p>
|
Mendefinisikan sebuah paragrap
|
<p align=”xxx”>
|
Mendefinisikan kesesuaian posisi
kanan,kiri,tengah ataupun kanan kiri.
|
<br />
|
Ganti baris
|
<ol></ol>
|
Awal dan akhir dari urutan daftar.
|
<ul></ul>
|
Mendefinisikan awal dan akhir daftar yang tidak
berada dalam urutan daftar.
|
<li></li>
|
Mendefinisikan awal dan akhir baris dalam
daftar.
|
Tags
Gambar
|
|
<img src=”name” />
|
Mendefinisikan gambar dan tempat.
|
<img src=”name” alt=”name”/>
|
Menentukan label alternatif gambar.
|
Aturan
Tags Horizontal
|
|
<hr />
|
Membuat Garis horisontal
|
TAG-TAG TAMBAHAN
Start
Tag
|
Kegunaan
|
<abbr>
|
Mendefinisikan suatu kependekan
|
<adress>
|
Mendefinisikan suatu elemen alamat
|
<bdo>
|
Mendefinisikan arah text
|
<blockquote>
|
Mendefinisikan kuotation panjang
|
<q>
|
Mendefinisikan kuotation pendek
|
<cite>
|
Mendefinisikan suatu kutipan
|
<dfn>
|
Mendefinisikan suatu istilah
|
Contoh 1 :
Heading Dan Paragraf
<!DOCTYPE html>
<head>
<title>PAGE TITLE</title>
</head>
<body>
<h1>Ini
Adalah Heading</h1>
<p>Ini Adalah
Paragraf</p>
</body>
</html>
Tampilan 1:
Contoh 2 :
Style Dan Comment
<!DOCTYPE html>
<head>
<title>PAGE TITLE</title>
</head>
<body>
<h2
style="color:red; ">Aku RED</h2>
<h2
style="color:blue; ">Aku BIRU</h2>
<!--Ini
Comment-->
<h1>Ini
Adalah Heading</h1>
<p>Ini Adalah
Paragraf</p>
</body>
</html>
Tampilan 2 :
Contoh 3 :
List
<!DOCTYPE html>
<head>
<title>PAGE TITLE</title>
</head>
<body>
<h2>A Nested
List</h2>
<ul>
<li>Coffe</li>
<li>Tea
<ul>
<li>Black
Tea</li>
<li>Green
Tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Tampilan 3 :
Contoh 4 :
Gambar
<!DOCTYPE html>
<head>
<title>CONTOH 4 : GAMBAR</title>
</head>
<body style="background-color:white;">
<img
src="index.jpg" width="350px" height="400px"
/>
<br />
<br />
<p>Anda
sedang belajar HTML ? Silahkan Kunjungi </p>
<a
href="http://ozhora97.blogspot.com/" target="_blank">
Halaman Ini</a></p>
</body>
</html>
Tampilan 4 :
Itulah dasar dasar
HTML yang dapat saya sampaikan,sebenarnya saya sendiri juga masih baru belajar
tentang HTML jadi mohon maaf jika tulisan yang diatas tadi ada kekurangan,
semoga bermanfaat.
EmoticonEmoticon