kumarianrr.blogspot.com: Mengenal Dasar HTML

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.

Secara garis besar, terdapat 4 jenis elemen dari HTML:

structural. tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan sebagai Heading 1
presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.ilmukita.com/">IlmuKita</a> akan menampilkan IlmuKita sebagai sebuah hyperlink ke URL tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).

A. DASAR-DASAR HTML

1. Penggunaan syntak HTML, bagian-bagian HTML, penggunaan komentar dan tag <BR> untuk ganti baris.

<HTML>

<HEAD>

<TITLE>Latihan HTML</TITLE>

</HEAD>

<BODY>

Selamat Belajar HTML<BR>

Semoga Sukses !

</BODY>

</HTML>

2. Menggunakan tag <P> untuk membuat paragraph; tag judul <H1> s/d <H6> untuk pembesaran huruf.

<HTML>

<HEAD>

<TITLE>Contoh Pengaturan Judul</TITLE>

</HEAD>

<BODY>

<H1 ALIGN = “CENTER”> Pesona Tanaman Hias </H1><P>

Keindahan tanaman hias<BR>

membawa suatu pesona tersendiri<BR>

Warna-warni bunga

</BODY>

</HTML>

3. Membuat garis horizontal <HR>

<HTML>

<HEAD>

<TITLE>Atribut NOSHADE pada Tag HR</TITLE>

</HEAD>

<BODY>

<H1>KEBUN PESONA</H1>

Jl. Solo Km 14<BR>

Surabaya <BR>

Indonesia<BR>

</BODY>

</HTML>

4. Menggunakan tag <DIV> untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik yang sama.

<HTML>

<HEAD>

</HEAD>

<BODY>

<H2>Surabaya</H2>

</DIV>

<HR>

</BODY>

</HTML>

B. PENGATURAN TEKS

1. Penggunaan <PRE> untuk menampilkan teks apa adanya.

<HTML>

<HEAD>

<TITLE>Praformat </TITLE>

</HEAD>

<BODY>

<H2>Daftar Harga Keladi:</H2>

<PRE>

Red Flash.........35.000

Red Fire..........60.000

Fannie Munson.....60.000

</PRE>

Harga sewaktu-waktu bisa berubah.

</BODY>

</HTML>

Coba hilangkan tag <PRE> dan lihat apa perbedaanya.

2. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font), Color (untuk warna)

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

Normal: 012345ABCD<BR>

<FONT COLOR="blue" FACE = "Arial">Arial:

012345ABCD</FONT>

<BR>

Courier: 012345ABCD</FONT>

<BR>

</BODY>

</HTML>

3. Pengaturan warna background : BGCOLOR

<HTML>

<HEAD>

<TITLE>Warna - Bagian 2</TITLE>

</HEAD>

Normal<BR>

<FONT COLOR = "blue">Warna Biru</FONT><BR>

<FONT COLOR = "green">Warna Hijau</FONT><BR>

<FONT COLOR = "red">Warna Merah</FONT><BR>

<FONT COLOR = "yellow">Warna kuning</FONT><BR>

</BODY>

</HTML>

C. MENAMPILKAN DAFTAR ITEM (LIST)

1. Penggunaan tag <UL> untuk daftar list yang tidak diberi nomor; tag <LI> untuk daftar item yang di beri bulatan.

<HTML>

<HEAD>

<TITLE>Contoh Pemakaian Tag UL dan LI</TITLE>

</HEAD>

<BODY>

<H2>Daftar Jurusan di PENS ITS :</H2>

<UL>

<LI>Telekomunikasi <BR>

<LI>Teknologi Informasi <BR>

<LI>Elektronika <BR>

<LI>Elektro Industri <BR>

</UL>

</BODY>

</HTML>

2. Penggunaan tag <OL> untuk menampilkan daftar item dengan nomor urut.

<HTML>

<HEAD>

<TITLE>Tag OL dengan TYPE</TITLE>

</HEAD>

<BODY>

<B>Dengan huruf kapital:</B>

<LI>Yogya<BR>

</OL>

<HR>

<B>Dengan angka romawi:</B>

<LI>Yogya<BR>

<LI>Magelang<BR>

</OL>

</BODY>

</HTML>

3. Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan menjorok ke kanan.

<HTML>

<HEAD>

<TITLE>Daftar Definisi</TITLE>

</HEAD>

<BODY>

<B>Kamus Teknologi Informasi:</B>

<DL>

<DD>Bahasa yang digunakan untuk menyusun Web</DD>

<DD>Protokol yang dipakai untuk mentransfer HTML</DD>

</DL>

</BODY>

</HTML>

Jumat, 13 Maret 2015

Mengenal Dasar HTML

Tidak ada komentar:

Posting Komentar