HYPERTEXT MARKUP LANGUAGE

2.1 Pengenalan Hypertext Markup Language

Hypertext Markup Language atau yang sering disebut dengan HTML merupakan standard bahasa yang di gunakan untuk menampilkan document web. Dengan menggunakan HTML hal-hal yang dapat dilakukan antara lain:

1. Mengontrol tampilan dari web page dan contentnya.

2. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.

3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

4. Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.

Untuk membuat dokumen HTML, kita dapat menggunakan software Notepad, Macromedia Dreamweaver atau web editor lainya.

2.2 Elemen dan Tag Pada Dokumen HTML

Dokumen HTML terdiri dari elemen-elemen yang saling berkaitan untuk membentuk dokumen HTML yang utuh. Element tersebut antara lain elemen html, elemen head, elemen title, dan elemen body yang masing-masing dengan tanda delimeter atau tanda<…>.

Elemen yang sudah diapit oleh tanda dilimeter disebut dengan Tag. Penulisan elemen adalah sebagai berikut:

<nama elemen> =>untuk memulai atau membuka elemen

</nama elemen> =>untuk mengakhiri atau menutup elemen

contoh

<html> =>membuka elemen html

</html> =>menutup elemen html

2.3 Stuktur Dokumen HTML

Elemen yang terdapat pada sebuah dokumen HTML terbagi atas dua bagian yaitu section Head dan Section Body.

Section Head atau bagian head merupakan bagian header yang terdiri dari tag <head>….</head>, dan di dalam bagan ini biasanya dimuat tag </title>…</title> yang berfungsi untuk menampilkan judul dari halaman titlenya browser.

Section Body atau bagian tubuh dokumen merupakan bagian dimana kita menempatkan semua isi web yang akan dibangun, baik berupa text, image, link dan semua yang akan ditampilkan pada web page. Bagian ini diapit oleh tag <body>…</body>, dan di dalam tag ini dapat kita tambahkan tag-tag yang lain yang mendukung dalam pembuatan dokumen HTML.

Contoh dokumen HTML

<html>

<head>

<title> program pertamaku</title>

</head>

<body>

Selamat datang di program

Pertama dalam pembuatan web

</body>

</html>

Program diatas dapat diketikan pada aplikasi Notepad dan menyimpan dengan format htm atau html, Seperti berikut ini:

Program tersebut simpan pada forlder Belajar Web, yang ada pada drive D dengan nama program1.htm. Ganti tipe penyimpanan menjadi All files, sehingga dokumen tersebut akan tersimpan dengan alamat d:/BelajarWeb/program1.htm. seperti tampilan berikut ini:

Catatan: Folder Belajar Web dibuat terlebih dahulu pada drive D.

Setelah dokumen disimpan, untuk melihat hasilnya maka kita dapat mengakifkan web browser contoh Internet Explorer. Pada address box ketikkan alamat file yang sudah tersimpan yaitu: D:/BelajarWeb/program1.htm, maka akan tampil hasil seperti gambar berikut ini:

2.4 Tag-Tag Yang Ada Pada HTML

Sebelum melanjutkan pembuatan dokumen HTML, sebaiknya kita tahu tag-tag yang dapat digunakan, sebab dalam membuat dokumen HTML kita tidak akan lepas dari pengguan tag, Karena hampir semua script HTML menggunakan Tag. Tag-tag tersebut dibagi menjadi beberapa bagian antara lain:

1. Tag Utama

Tag utama merupakan tag yang wajib digunakan dalam setiap dokumen HTML.

Tag	Properties	Keterangan
<html>…</html>		Untuk mengawali dan mengakhiri dokumen HTML
<head>…</head>		Informasi umum sebuah halaman web
<title>…</title>		Judul halaman yang akan tampil di title bar
<body></body>	Background Bgcolor Bgsound Font Link Alink Vlink Topmargin Leftmargin Marginheight Marginwidth	Badan dokumen, Properties digunakan untuk settingan seluruh badan dokumen

2. Tag Modifikasiteks

Tag ini digunakan untuk melakukan settingan terhadap teks yang kita gunakan.

Tag	Keterangan	Contoh hasil
<b></b>	Cetak bold/tebal	Cetak Bold/Tebal
<i></i>	Cetak italic/cetak miring	Cetak cetak miring
<u></u>	Cetak underline/garis bawah	Garis Bawah
<pre></pre>	Preformatted Teks	Contoh teks
<h1></h1>	Menyisipkan tulisan dalam bentuk heading 1	Heading 1
<h2></h2>	Menyisipkan tulisan dalam bentuk heading 2.	Heading 2
<h3></h3>	Menyisipkan tulisan dalam bentuk heading 3.	Heading 3
<h4></h4>	Menyisipkan tulisan dalam bentuk heading 4.	Heading 4
<h5></h5>	Menyisipkan tulisan dalam bentuk heading 5.	Heading 5
<h6></h6>	Menyisipkan tulisan dalam bentuk heading 6.	Heading 6
<h7></h7>	Menyisipkan tulisan dalam bentuk heading 7.	Heading 7
<sub></sub>	Subscript	Subs_cript
<sup></sup>	Superscript	Super^cript

3. Tag Font

Tag font berfungsi untuk mengubah gaya huruf yang akan kita gunakan antara lain jenis huruf, warna huruf dan ukuran huruf.

Tag	Properties	Keterangan
<font>	Face	Mengubah jenis huruf
	Color	Mengubah warna huruf
	Size	Mengubah ukuran huruf

4. Tag Hyperlink

Tag hyperlink atau sering disebut dengan link saja, berfungsi untuk membuat koneksi atau hubungan dengan dokumen maupun situs lainnya.

Tag	Properties	Keterangan
<a></a>	Href Target Style Class Name Id	Membuat link kedokumen atau situs lain

5. Tag Image

Tag image merupakan tag yang digunakan untuk mengolah gambar pada dokumen HTML.

Tag	Properties	Keterangan
<img>	Src	Alamat gambar yang akan digunakan
	Border	Bingkai gambar
	Height	Ukuran gambar secara horizontal
	Width	Ukuran gambars ecara vertical
	Align	Mengatur posisi gambar
	Title	Tulisan pada pointer saat pointer diarahkan ke gambar
	Style	Mengubah style gambar

6. Tag Formatting

Tag formatting digunakan untuk melakukan format terhadap teks yang digunakan dalam dokumen HTML.

Tag	Keterangan	Contohhasil
<blockquote> </blockquot>	Digunakan untuk mengatur teks dan gambar dalam satu tag
<ol></ol>	Ordered list (dipakai dengan<li>) untuk membuat penomoran	<ol> <li>Makanan</li> <li>Minuman</li> </ol> Hasilnya: 1. Makanan 2. Minuman
<ul></ul>	Unordered list (dipakai dengan<li>) untuk membuat simbol	<ul> <li>sate</li> <li>bakso</li> </ul> Hasilnya: · sate · bakso
<li>	List (item pada<ol>dan<ul>)
<p></p>	Paragraf
<br>	Break lines (memotong kalimat	Contoh : Saya<br>makan<br>nasigoreng Hasilnya: Saya makan nasi goring
<hr>	Horizontal lines (garis horizontal
<center></center>	Perataantengah	Rata tengah

7. Tag Table

Tag table berfungsi untuk membuat tabel dan mengelola tabel pada dokumen HTML. Tabel merupakan kumpulan dari beberapa baris dan kolom yang membentuk satu kesatuan.

Tag	Properties	Keterangan
<table></table>	Border	Membuat bingkai tabel
	Cellpadding	Membuat jarak teks dari garis tabel
	Cellspacing	Membuat spasi pada cell pada tabel
	Background	Membuat gambar background tabel
	Bgcolor	Membuat warna background tabel
	Height	Ukuran tabel secara horizontal
	Width	Ukuran tabel secara vertical
	Align	Perataan tabel
	Title	Judul tabel pada saat pointer diarahkan ke tabel
	Bordercolor	Membuat warna bingkai tabel
<tr></tr>	Align	Perataan baris
	Bgcolor	Membuat warna background baris
	Background	Membuat gambar background baris
	Height	Menentukan panjang baris
	Valign	Membuat perataan baris secara vertical
	Title	Membuat judul baris saat pointer diarahkan
<td></td>		Membuat sel dalam baris untuk membentuk kolom
	Align	Perataan cell
	Bgcolor	Membuat warna background cell
	Background	Membuat gambar background cell
	Colspan	Menyatu beberapa beberapa cell pada kolom
	Height	Membuat ukuran cell secara horizontal
	Rowspan	Menyatukan beberapa cell pada baris
	Width	Membuat ukuran cell secara vertical
<th></th>		Membuat header tabel
	Align	Perataan header
	Bgcolor	Membuat warna background header
	Background	Membuat gambar background header
	Height	Menentukan panjang header
	Valign	Membuat perataan header secara vertical
	Title	Membuat judul header aat pointer diarahkan
	Width	Membuat ukuran header secara vertical

8. Tag Form

Berfungsi untuk membuat formulir yang dapat diisi pada dokumen HTML.

Tag	Properties						Keterangan
<form></form>	Action						Aksi yang dilaksanakan setelah mengisi form dan menekan tombol submit
	Enctype						Type enkripsi dari form
	Method						Metode pengolahan form
	Name						Nama form
<input type= ” “	Button Checkbox File Hidden Image Password Radio Submit Text						Jenis-jenis tipe yang ada pada elemen form, dipilih dan diletakkan diantara petik setelah type=
Text	Name						Nama
	Value						Isi text
	Width						Panjang text
	Maxlength						Maksimal panjang karakter yang dapat diisikan pada text
	Align						Perataan
	disabled						Men-disable atau menonaktifkan text, sehingga tidak dapat diisi.
	Size						Panjang text
							Contoh penggunaan
Password		Name				Nama objek password
		Value				Isi objek password
		Width				Panjang objek password
		Maxlength				Maksimal panjang karakter yang dapat diisikan pada password
		Title				Teks yang tampil saat pointer diarahkan ke objek password
						Contoh penggunaan
Hidden						Merupakan objek yang di sembunyikan dengan tujuan menampung sebuah variable namun tidak dapat dilihat oleh pengguna
		Name				Nama objek hidden
		Value				Isi objek hidden
Radio						Digunakan untuk membuat pilihan dimana pilihan yang dapat dipilih hanya 1
		Name				Nama
		Value				Isi dari radio
		Checked				Menentukan apakah radio dalam posisi terchek saat dimulai atau tidak
						Contoh penggunaan
Submit						Objek yang berfungsi sebagai tombol bila di klik maka form akan diproses
		Value				Isi tombol
		Name				Nama tombol
						Contoh:
Checkbox					Digunakan untuk membuat pilihan dimana pilihan yang dapat dipilih bisa lebih dari 1
			Name		Nama
			Value		Isi checkbox
			Checked		Menentukan apakah checkbox dalam posisi terchek saat dimulai atau tidak
					Contoh penggunaan:
Image					Menambahkan gambar pada dokumen
			Src		Alamat gambar
			Height		Mengatur panjang gambar
			Width		Mengatur tinggi gambar
			Name		Nama gambar
			Border		Bingkai gambar
			Title		Teks yang muncul saat pointer diarahkan ke gambar
Reset					Objek yang berfungsi sebagai tombol bila diklik maka form akan dibersihkan
			Value		Isi reset
			Name		Nama reset
					Contoh
<select></select>								Objek yang menyediakan pilihan, digunakan bersama dengan option
				Name				Nama
				Size				Ukuran
<option></option>				Name				Nama option
				Value				Isi option
								Contoh penggunaan
<textarea> </textarea>				Name				Nama textarea
				Rows				Panjang baris area
				Cols				Panjang kolom area
								Contoh
File								Objek yang dapat digunakan untuk mengambil file
				Name				Nama file
				Width				Panjang file
								Contoh

MENULIS ADALAH TERAPI BUATKU

Cari Blog Ini

HYPERTEXT MARKUP LANGUAGE

Komentar

Posting Komentar