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>
HYPERTEXT MARKUP LANGUAGE (HTML)
By ITC Bidang Kemahasiswaan Universitas Negeri Semarang 1
</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.
2. Garis horizontal
Fungsi : membuat garis horizontal penuh pada layar/halaman web
Sintaks : <HR>
Contoh :
<HTML>
<HEAD>
<TITLE>Garis Horizontal</TITLE>
</HEAD>
<BODY>
<H1>Di bawah tulisan ini ada garis horizontal</H1>
<HR>
</BODY>
</HTML>
Ket : Penulisan <HR> bisa terletak dibawah suatu teks atau di sampingnya.
Contoh :
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan Heading</TITLE>
</HEAD>
<BODY>
<H1>Di bawah tulisan ini ada garis horizontal</H1><HR>
</BODY>
</HTML>
Coba Anda bandingkan apakah kedua contoh di atas ada bedanya?
3. Teks miring (Italic)
Sintaks : <I> … </I>
Contoh :
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan italic</TITLE>
</HEAD>
<BODY>
<H1><I>Teks ini ditulis dengan H1 dan miring</I></H1>
</BODY>
</HTML>
4. Teks tebal (bold)
Sintaks : <B> … </B>
Contoh :
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan bold</TITLE>
</HEAD>
<BODY>
<H1><B>Teks ini ditulis dengan H1 dan bold</B></H1>
</BODY>
</HTML>
Apabila diinginkan suatu teks miring dan tebal, perhatikan penulisan berikut ini.
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan italic dan bold</TITLE>
</HEAD>
<BODY>
<H1><I><B>Teks ini ditulis dengan H1, miring dan tebal
</B></I></H1>
</BODY>
</HTML>
Penulisan <I>, <B> dan </I>, </B> bisa dibolak-balik, misalnya
<I><B>Teks ini ditulis dengan H1, miring dan tebal </B></I>
atau
<B><I>Teks ini ditulis dengan H1, miring dan tebal </I></B>
atau
<I><B>Teks ini ditulis dengan H1, miring dan tebal </I></B>
atau
<B><I>Teks ini ditulis dengan H1, miring dan tebal </B></I>
5. Teks dengan garis bawah (underlined)
Sintaks : <U> … </U>
Contoh :
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan underline</TITLE>
</HEAD>
<BODY>
<H1><U>Teks ini ditulis dengan H1 dan bergaris bawah</U></H1>
</BODY>
</HTML>
Apabila suatu teks dengan gabungan sifat bold, italic, dan underlined maka
penulisannya
<HTML>
<HEAD>
<TITLE>Penyuntingan teks dengan bold, italic, dan bergaris bawah
</TITLE>
</HEAD>
<BODY>
<H1><I><B><U>Teks ini ditulis dengan H1, bold, italic dan miring
</U></B></I></H1>
</BODY>
</HTML>
6. Center
Fungsi : membuat teks (tunggal) berada di tengah halaman
Sintaks : <center> … </center>
Contoh :
<HTML>
<HEAD>
<TITLE>Teks Center</TITLE>
</HEAD>
<BODY>
<CENTER>Tulisan ini berada di tengah</CENTER>
</BODY>
</HTML>
7. Paragraf
Fungsi : untuk memisahkan paragraf yang satu dengan yang lain
Sintaks : <P> … </P>
Contoh :
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<H1>Contoh paragraf</H1><HR>
<P>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.</P>
<P> 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.</P>
</BODY>
</HTML>
8. Alignment
Fungsi : untuk mengatur format tampilan teks/paragraf apakah rata kiri,
kanan, kiri dan kanan, atau tengah,
Sintaks :
<P ALIGN=right>…</P> untuk rata kanan
<P ALIGN=left>…</P> untuk rata kiri
<P ALIGN=center>…</P> untuk rata tengah
<P ALIGN=justify>…</P> untuk rata kiri dan kanan
atau
<H? ALIGN=right>…</H?>
<H? ALIGN=left>…</H?>
<H? ALIGN=center>…</H?>
<H? ALIGN=justify>…</H?>
Contoh :
<HTML>
<HEAD>
<TITLE>Alignment Paragraf</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=right>Contoh paragraf</H1><HR>
<P ALIGN=justify>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.</P>
<P ALIGN=justify> 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.</P>
</BODY>
</HTML>
9. Jenis dan ukuran huruf
Fungsi : Untuk mengubah jenis huruf dan ukuran huruf
Sintaks : <FONT FACE=”jenis_huruf” SIZE=”ukuran_huruf”> ... </FONT>
*)
Jenis_huruf : Times new roman, arial, verdana, dll
Ukuran_huruf : 1, 2, 3, 4, ...
Contoh :
<HTML>
<HEAD>
<TITLE>Jenis dan Ukuran Fontasi</TITLE>
</HEAD>
<BODY>
<FONT FACE=”Verdana” SIZE=”1”> Teks ini ditulis dengan jenis huruf
Verdana dan ukuran 1 pt </FONT><BR><BR>
<FONT FACE=”Arial” SIZE=”3”> Teks ini ditulis dengan jenis huruf Arial dan
ukuran 3 pt </FONT>
</BODY>
</HTML>
10. Superscripts
Fungsi : membuat teks naik (indeks atas)
Sintaks : <SUP> ... </SUP>
Contoh :
<HTML>
<HEAD>
<TITLE>Superscripts</TITLE>
</HEAD>
<BODY>
Persamaan x<SUP>2</SUP>+2x-4=0 adalah salah satu bentuk
persamaan kuadrat
</BODY>
</HTML>
11. Subscripts
Fungsi : membuat teks turun (indeks bawah)
Sintaks : <SUB> ... </SUB>
Contoh :
<HTML>
<HEAD>
<TITLE>Subscripts</TITLE>
</HEAD>
<BODY>
Rumus kimia asam sulfat adalah H<SUB>2</SUB>SO<SUB>4</SUB>
</BODY>
</HTML>
12.List/daftar
Fungsi : membuat daftar/list
Sintaks :
Untuk daftar yang memperhatikan urutan (Ordered List)
<OL>
<LI> item 1 </LI>
<LI> item 2 </LI>
<LI> item 3 </LI>
<LI> item 4 </LI>
</OL>
Untuk daftar yang tidak memperhatikan urutan (Unordered List)
<UL>
<LI> item 1 </LI>
<LI> item 2 </LI>
<LI> item 3 </LI>
<LI> item 4 </LI>
</UL>
Contoh :
<HTML>
<HEAD><TITLE>Daftar/List</TITLE></HEAD>
<BODY>
Contoh list yang urut: <BR>
<OL>
<LI>Item 1 </LI>
<LI>Item 2 </LI>
<LI>Item 3 </LI>
<LI>Item 4 </LI>
</OL>
<BR><BR>
Contoh list yang tak urut: <BR>
<UL>
<LI>Item 1 </LI>
<LI>Item 2 </LI>
<LI>Item 3 </LI>
<LI>Item 4 </LI>
</UL>
</BODY>
</HTML>
C. Membuat Tabel
Di dalam sebuah tabel, terdapat elemen-elemen yang terdiri dari baris dan kolom. Jadi
ketika anda ingin membuat tabel, tentukan dulu jumlah baris dan kolomnya.
Berikut contoh tag HTML apabila diinginkan membuat tabel dengan 2 baris dan 1
kolom.
<TABLE>
<TR><TD>Baris ke-1</TD></TR>
<TR><TD>Baris ke-2</TD></TR>
</TABLE>
Perhatikan contoh di atas, setiap kali baris baru ditandai dengan <TR>…</TR>. Di
dalam <TR>…</TR> terdapat <TD>…</TD> yang menandai adanya kolom.
Seandainya dalam 1 baris terdapat 2 kolom berarti tag HTMLnya menjadi
<TR><TD>Kolom ke-1</TD><TD>Kolom ke-2</TD></TR>
Berarti apabila diinginkan tabel dengan 3 baris dan 2 kolom, tag HTML nya adalah
<TABLE>
<TR><TD>Baris I, Kolom I</TD><TD>Baris I, Kolom II</TD></TR>
<TR><TD>Baris II, Kolom I</TD><TD>Baris II, Kolom II</TD></TR>
<TR><TD>Baris III, Kolom I</TD><TD>Baris III, Kolom II</TD></TR>
</TABLE>
Apabila tag tersebut disisipkan dalam <BODY>…</BODY> maka akan tampil tampil
tabel pada halaman web, tapi tanpa garis tepi/border. Untuk menampilkan bordernya,
sisipkan 'BORDER = ukuran' pada <TABLE>, dengan ukuran = 0, 1, 2, …
Apabila ukuran = 0, maka tanpa border. Dan semakin besar nilai ukuran maka
semakin tebal bordernya.
Contoh:
<TABLE BORDER=1>
<TR><TD>Baris I, Kolom I</TD><TD>Baris I, Kolom II</TD></TR>
<TR><TD>Baris II, Kolom I</TD><TD>Baris II, Kolom II</TD></TR>
<TR><TD>Baris III, Kolom I</TD><TD>Baris III, Kolom II</TD></TR>
</TABLE>
Berikut ini beberapa atribut yang bisa disisipkan pada <TABLE>
Atribut Fungsi
WIDTH = panjang Mengatur lebar tabel
BGCOLOR = warna Memberi efek warna latar pada
tabel
ALIGN = [left | center | right] Perataan tabel
BACKGROUND=url Memberi efek background
menggunakan gambar
NB:
· Untuk nilai variabel 'panjang' di atas, dapat berupa % artinya apabila dituliskan
<TABLE WIDTH=100%> maka lebar tabel adalah sepanjang (horizontal) halaman
web. Berarti apabila diinginkan lebar tabelnya separo halaman web, diberi nilai
50% dst.
· Selain % dapat pula bernilai sejumlah pixelnya. Untuk sepanjang (horizontal)
halaman web, jumlah pixelnya adalah 800. Dengan perbandingan tersebut, Anda
diharapkan bisa membuat perbandingan sendiri jumlah pixel untuk menentukan
lebar tabel.
· ALIGN digunakan untuk meletakkan tabel apakah di tengah, di kiri atau di kanan.
· Untuk nilai variabel 'warna' adalah sama seperti yang digunakan pada atribut
COLOR pada <FONT>.
D. Link
Link adalah suatu metode dalam perancangan website untuk menghu-bungkan file
yang satu dengan file yang lain, atau menghubungkan halaman dengan gambar yang
berada pada lokasi yang berbeda.
Sintaks :
<A HREF="lokasi halaman atau URL" TARGET=_BLANK>Nama Link</A>
Contoh:
<A HREF="index2.htm">Klik di sini</A>
Contoh di atas adalah membuat link ke halaman index2.htm. Artinya ketika diklik "Klik
di sini" selanjutnya akan tampil isi dari halaman index2.htm (berada dalam 1 direktori
yang sama dengan file yang berisi link tersebut).
<A HREF="http://www.yahoo.com" TARGET=_BLANK>www.yahoo.com</A>
Contoh di atas adalah untuk membuat link ke situs yahoo.com
E. Menampilkan Gambar
Untuk memasukkan/insert gambar ke dalam halaman web digunakan sintaks
<IMG SRC="lokasi gambar">
Keterangan:
"lokasi gambar" berisi letak file gambar, bisa berupa direktori maupun URL dan nama
filenya.
Contoh :
<IMG SRC="gambar1.jpg">
Tag HTML di atas adalah untuk menyisipkan gambar dengan nama file gambar1.jpg ke
dalam halaman web. Adapun file gambar1.jpg berada dalam 1 direktori yang sama
dengan halaman yang ada tag tersebut.
<IMG SRC="http://myweb.com/image/gambar2.gif">
Tag HTML di atas untuk menyisipkan file gambar dengan letaknya seperti yang ditulis
dalam URL.
Berikut beberapa atribut yang dapat disisipkan pada <IMG>
Atribut Fungsi
BORDER = ukuran Memberi border/garis tepi gambar
WIDTH = ukuran Menyatakan ukuran lebar gambar
HEIGHT = ukuran Menyatakan ukuran tinggi gambar
ALIGN = [left | center | right] Mengatur letak gambar
NB:
Nilai 'ukuran' pada BORDER = 0, 1, 2, …
Apabila BORDER = 0 maka border tidak muncul.
Nilai 'ukuran' pada WIDTH dan HEIGHT adalah ukuran pixel
Contoh
<IMG SRC="gambar2.gif" BORDER=1 WIDTH=200 HEIGHT=100 ALIGN=LEFT>
Tag di atas untuk menyisipkan gambar dengan nama file gambar gambar2.gif, diberi
border, lebar dan tinggi adalah 200 dan 100 pixel, serta letak gambar berada di
sebelah kiri halaman.
Sumber : http://simawa.unnes.ac.id/simawa_v2/download/Dasar%20Pembuatan%20Website.pdf
Tidak ada komentar:
Posting Komentar