Selasa, 11 Februari 2014

Belajar HTML (HyperText Markup Language)

20.05  ,  No comments
Apakah HTML itu ? HyperText Markup Language (HTML) adalah sebuah markup language yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML (Wikipedia).

Ciri-ciri utama html adalah mempunyai tag dan elemen:
  • Elemen terdiri dari 2 yaitu head dan body
    1. Head fungsi memberikan informasi tentang suatu dokumen HTML, seperti judul web page, deskripsi situs, keyword dan lain sebagainya. 
    2. Body merupakan elemen yang digunakan untuk menentukan isi yang akan ditampilkan oleh browser seperti paragraf, list, tabel, dan lain sebagainy.
  • Tag : dalam HTML selalu ada  tag pembuka dan ada tag penutup. Tetapi ada sebagian tag HTML yang tidak menggunakan tag penutup.  
Tag-tag HTML yang sering digunakan
  • Title
    Tag ini <title></title> digunakan untuk memberi judul halaman web page. Tag ini diletakan didalam tag <head></head>
  • Baris Baru
    Untuk membuat baris baru digunakan tag <br/>
  • Hyperlink
    Tag ini digunakan untuk membuat link, bisa digunkan untuk satu halaman website atau link ke halaman website <a href="www.facebook.com">Facebook</a> 
  • Menampilkan Gambar Tag ini digunakan untuk menampilkan gambar. Biasanya dalam tag ini disertakan height dan width untuk menyesuaikan ukuran gambar yang diinginkan <img src="love.jpg" height="200" width="200"/> 
Tag Utama
Tag Deskripsi
<html></html> Baris paling atas dari setiap file HTML
<head></head> Informasi umum dari sebuah halaman web
<title></title> Judul halaman. Terdapat pada head
<body></body> Settingan atribut untuk seluruh dokumen

Font Style
Tag Deskripsi
<b></b> Teks tebal
<i> </i> Teks miring
<u> </u> Teks garis bawah
<pre></pre> Preformatted teks
<h1></h1> Header 1
<h2></h2> Header 2
<h3> </h3> Header 3
<h4></h4> Header 4
<h5></h5> Header 5
<h6></h6> Header 6
<sub></sub> Subscript
<sup></sup> Superscript

Formating
Tag Deskripsi
<blockquote></blockquote> Digunakan untuk mengatur text dan gambar dalam suatu tag
<ol></ol> Ordered List (digunakan dengan <li>)
<ul></ul> Unordered List (digunakan dengan <li>)
<li> Elemen List
<dd></dd> Definition List
<dt> Definition Term
<dd> Definition Description
<p></p> Paragraf
<br> Ganti baris
<hr> Garis horizonta
<center></center> Menengahkan elemen

Tabel
Tag Deskripsi
<table></table> Mengatur semua elemen table
<tr></tr> Membuat baris baru
<td></td> Membuat kolom
<th></th> Header(kepala tabel). Otomatis ke tengah dan tebal
<tbody></tbody> Format yang berlaku bagi cell yang diapit tag
<colgroup></colgroup> Format yang berlaku bagi kolom

Tag Lainnya
Tag Deskripsi
<form></form> Mengatur elemen dari form
<input type=> Variasi dari tipe elemen input dalam form
<select></select> Membuat combo-box. Digunakan bersama dengan option
<option>
<textarea></textarea> Membuat Text Area untuk input text dengan length yang lebih besar dari input text.
<fieldset></fieldse> Untuk mengelompokkan elemen-elemen yang terkait dalam form / membuat seperti frame-box di dalam form
<embed></embed> Digunakan untuk memasukkan file video atau file musik
<frameset></frameset> Mendefinisikan satu set frame
<marquee></marquee> Membuat teks berjalan secara vertikal atau horisontal
<blink></blink> Membuat teks berkedip


Berikut contoh penulisan HTML :
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>Belajar HTML</title> // Judul dari halaman web yang anda buat
   </head>
<body>
Belajar HTML</br>
<i>Belajar HTML</i><br/>
<b>Belajar HTML</b><br/>
<u>Belajar HTML</u><br/>
<h1>Belajar HTML<h1>
<h2>Belajar HTML<h2>
<h3>Belajar HTML<h3>
<h4>Belajar HTML<h4>
<h5>Belajar HTML<h5>
<h6>Belajar HTML<h6>
Belajar <sub>HTML</sub><br/>
Belajar <sup>HTML</sup><br/>
<font color="#1faced" size="7">Belajar HTML</font><br/>

</body> 
</html>
HASIL :

 Belajar HTML
Belajar HTML
Belajar HTML

Belajar HTML

Belajar HTML

Belajar HTML

Belajar HTML

Belajar HTML
Belajar HTML
Belajar HTML
Belajar HTML
Belajar HTML
Belajar membuat form : buatlah dokumen baru kemudian ketikan script dibawah ini dan simpan dengan nama "belajar_form.html".
 
<html>
<head>
<title>Belajar HTML : Membuat Forms</title>
</head>
<body>
<form action="html_form_action.asp" method="get" name="input">
First name <input name="firstname" type="text" /> //membuat textfield

Last name <input name="lastname" type="text" /> //membuat textfield


Password <input name="pwd" type="password" /> //membuat textfield


Sex : 

<input name="sex" type="radio" value="male" /> Male //membuat radiobutton

<input name="sex" type="radio" value="female" /> Female //membuat radiobutton


Vehicle : 

<input name="vehicle" type="checkbox" value="Bike" /> Bike //membuat checkbox

<input name="vehicle" type="checkbox" value="Car" /> Car //membuat checkbox



tombol input

<input type="submit" value="Submit" /> //membuat //membuat tombol / button


</form>
</body>
</html>
Hasil script diatas :
First name
Last name
Password name
Sex :
Male
Female
Vehicle :
Bike
Car
tombol input

HTMLmerupakan dasar dari pembuatan sebuah website, pelajarilah HTML sebelum kalian mengenal dengan yang namanya CSS (Cascading Style Sheets) , PHP dan JavaScript. Belajarlah dengan tekun dan sampai bosan. Semangat :)

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)