Tentang HTML

HYPERTEXT MARKUP LANGUAGE (HTML)
Di dalam desain web, tidak akan bisa lepas dengan yang namanya HTML (Hypertext
Markup Language). HTML adalah bahasa standar yang digunakan untuk
menyusun/membangun suatu halaman web.
Meskipun telah muncul software-software yang dapat digunakan untuk membangun suatu
halaman web tanpa susah-susah memperhatikan struktur HTML-nya, tidak ada salahnya
kalau HTML itu sendiri dipelajari. Manfaat yang diperoleh apabila mempelajari HTML
selain mampu membangun halaman web, juga dapat dikembangkan untuk pemrograman
web. Pemrograman web akan selalu terkait dengan HTML tersebut. Pemrograman web
biasanya dikembangkan untuk membangun web yang dinamis.
Setiap homepage yang dikunjungi, pasti bisa dijumpai HTML-nya yang selanjutnya disebut
SOURCE.

A. Striuktur HTML
Bahasa HTML (tag) dapat ditulis/dibuat melalui berbagai macam word editor, misalnya
Notepad, Wordpad, PHP Designer 2005, dll. Tag-tag tersebut dapat dituliskan dengan
huruf besar ataupun huruf kecil. Setelah tag HTML ditulis dengan menggunakan
Notepad atau word editor yang lain, simpanlah file tersebut dengan format file
nama_file.htm atau nama_file.html
Sebagai contoh, file HTML tersebut disimpan dengan nama index.htm atau index.html
Adapun struktur HTML adalah sbb:
<HTML>
<HEAD>
<META>
<TITLE> … </TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
Keterangan:
– Tag HTML secara default dimulai dari <HTML> dan diakhiri dengan </HTML>.
– Tag <HEAD> … </HEAD> merupakan tag kepala sebelum badan. Tag kepala ini
akan terlebih dulu dieksekusi sebelum tag badan. Di dalam tag ini berisi tag
<META> dan <TITLE>. Tag <META> merupakan informasi atau header suatu
dokumen HTML. Atribut yang dimiliki oleh tag ini antara lain:
– HTTP_EQUIV, atribut ini berfungsi untuk menampilkan dokumen HTML secara
otomatis dalam jangka waktu tertentu.
– CONTENT, atribut ini berisi informasi tentang isi document HTML yang akan
dipanggil.
– NAME, atribut ini merupakan identifikasi dari meta itu sendiri.
Tag <META> dalam suatu document HTML boleh ada maupun tidak.
Sedangkan tag <TITLE> … </TITLE> adalah tag judul. Sebaiknya setiap halaman
web memiliki judul, dan judul tersebut dituliskan di dalam <TITLE> … </TITLE>.
Judul ini akan muncul dalam titlebar dari browser.
– Sedangkan tag <BODY> … </BODY> adalah tag berisi content dari suatu halaman
web.
Setelah tag tersebut di atas ditulis, simpan dalam format .htm atau .html (misal
index.htm) akan tetapi terlebih dahulu ubah Save as type ke dalam All Files.
Kemudian tentukan letak direktori mana file tersebut akan disimpan, selanjutnya klik
Save.
Selanjutnya document HTML tersebut dipanggil dengan browser untuk melihat
hasilnya.
Dari tampilan pada browser di atas, dapat terlihat bahwa apa yang ditulis pada
<TITLE> … </TITLE> akan muncul pada titlebar browser dan apa yang ditulis pada
<BODY> … </BODY> akan muncul pada halaman web.
Untuk selanjutnya, kita hanya akan memperhatikan tag-tag yang ada di dalam
<BODY> … </BODY> karena bentuk tampilan/desain web tergantung pada tag yang
ditulis di dalam <BODY> … </BODY>.

B. Penyunting Text
Berikut ini berbagai macam tag yang dapat digunakan untuk penyuntingan teks.
1. Heading
2. Garis horizontal
3. Teks miring
4. Teks tebal
5. Teks dengan garis bawah
6. Center
7. Paragraf
8. Alignment (Rata kiri, tengah, kanan, justifikasi)
9. Jenis huruf
10.Superscripts
11. Subscripts
12.List/daftar
Penjelasannya :
1. Heading
Fungsi : untuk membuat/memilih ukuran teks, umumnya untuk judul karena
ukurannya yang besar.
Sintaks :
<H1> … </H1>,
<H2> … </H2>,
<H3> … </H3>, s/d
<H6> … </H6>
Ket : Semakin besar angka 1 s/d 6 maka semakin kecil ukuran hurufnya.
Contoh :
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan Heading</TITLE>
</HEAD>
<BODY>
<H1>Teks ini ditulis dengan H1</H1>
<H2>Teks ini ditulis dengan H2</H2>
</BODY>
</HTML>
Coba hasilnya Anda lihat di browser, selanjutnya bandingkan apabila digunakan
<H3>…</H3>, <H4>…</H4>, dst.

About Sugeng Siswanto

Anak Biasa... Disaat ada Kesempatan & waktu luang Sekedar berbagi Cerita & apa yang aku ketahui kedalam blogg sederhanan ini. Semoga bermanfaat buat yang udah nyasar kesini. =>Salam Persahabatan. 【ツ】

Posted on Oktober 3, 2012, in HTML, komputer, kuliah, Pemrogaman, web. Bookmark the permalink. 1 Komentar.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: