Pengantar HTML dan Link
Memulai HTML
HTML adalah bahasa yang sangat tepat dipakai untuk menampilkan informasi pada halaman Web
karena HTML menampilkan informasi dalam bentuk hypertext dan juga mendukung sekumpulan
perintah yang dapat digunakan untuk mengatur tampilnya informasi tersebut.
Sesuai dengan namanya, bahasa ini menggunakan tanda (markup)untuk menandai perintah-perintahnya.
Saat ini banyak sekali aplikasi yang dapat digunakan untuk membuat Web Page secara mudah, seperti
Microsoft FrontPage, Adobe Golive dan lainnya. Namun demikian untuk seorang Web Developer harus
memiliki kemampuan dasar menguasi perintah HTML
Untuk dapat menggunakan HTML, Anda membutuhkan beberapa hal, diantaranya adalah:
1]Anda memerlukan teks editor untuk mengetikkan HTML Anda. Klik Start | Program kemudian
Accessories lalu pilih Notepad
2]Anda membutuhkan sebuah web browser untuk mempublikasikan HTML Anda. Anda dapat
menggunakan Microsoft Internet Explorer.
3]Anda membutuhkan tempat penyimpanan. Gunakan hard disk, floppy disk, atau web server. Anda
tidak harus bekerja online dengan internet, Anda dapat menulis HTML kemudian menggunakan
web browser secara offline di komputer.
Struktur Dokumen HTML
Di bawah ini adalah struktur dari dokumen HTML :
<HTML>
<HEAD>
<TITLE>contoh1.htm</TITLE>
</HEAD>
<BODY>
Kepala atau kop dokumen
<p>
Isi dokumen
</BODY>
</HTML>
Setelah selesai klik menu "File" menu dan pilih "Save As" . Akan muncul kotak Save yang akan
menyimpan dokumen Anda. Lalu ketikkan contoh1.htm . Pada kotak yang paling bawah Anda dapat
melihat "Save file as Type" or "Save as Type". Defaultnya adalah .txt, jadi Anda harus mengubahnya
ke All Files(*.*). Lalu Anda dapat mengklik Save.
Buka Microsoft Internet Explorer dengan mengklik Start, Program lalu pilih Internet Explorer. Internet
Explorer akan terbuka lalu Anda dapat memilih menu File, Open lalu cari lokasi file di disket Anda.
Struktur di atas diapit oleh tag <HTML> dan </HTML> yang menandai awal dan akhir dari sebuah
dokumen yang digunakan untuk menyisipkan informasi mengenai dokumen, misalkan versi, revisi dan
sebagainya. Sedangkan bagian yang diapit oleh tag <TITLE> dan </TITLE> menunjukkan judul dari
halaman web Anda.
Bagian kedua yang diapit <BODY> dan </BODY> berisi dokumen atau informasi yang hendak
disajikan.
Headings
Heading digunakan untuk menampilkan nama bab atau bagian tertentu yang dianggap sebagai topik
utama. Pada HTML terdapat enam level heading mulai dari tag <H1> sampai dengan <H6>. Anda juga
dapat menggunakan tag untuk mengatur ukuran font, misalkan yang terbesar dengan <H1> atau
membuatnya paling kecil dengan <H6> namun tag ini bukan digunakan untuk keperluan tersebut.
Mengatur Posisi Heading
Posisi heading pada dokumen HTML dapat Anda tentukan sendiri. Artinya teks yang berfungsi sebagai
heading dapat Anda tempatkan di kiri, kanan, atau di tengah dalam dokumen.Untuk mengatur posisi
heading, Anda dapat menggunakan atribut ALIGN pada tag heading. Nilai dari atribut ALIGN dapat
diisi dengan salah satu nilai, left untuk perataan sebelah kiri, right untuk perataan sebelah kanan, atau
center untuk menuliskannya tepat di tengah.
Berikut ini adalah contoh penulisan atribut align pada tag heading:
<HTML>
<HEAD>
<TITLE>contoh2.htm</TITLE>
</HEAD>
<BODY>
<H1 Align="Left"> Heading rata kiri </H1><BR>
<H2 Align="Right"> Heading rata kanan </H2><BR>
<H4 Align="Center"> Heading rata tengah </H4>
</BODY>
</HTML>
Membuat Baris Baru
Line break <BR> adalah tag yang berfungsi untuk membuat baris baru pada dokumen HTML tag
<BR> ini membuat baris baru tanpa memberi baris kosong.
Membuat Garis Horizontal
Horizontal Rule <HR> adalah tag tunggal yang berfungsi untuk membuat garis horizontal. Tag <HR>
akan memberikan garis horizontal sepanjang baris kosong.
Membuat Daftar/List
Untuk membuat daftar atau list, HTML menyediakan empat macam list, yaitu :
- unordered list
- ordered list
- definisi
- menu
Unordered List
Unordered listbiasanya ditandai dengan pemakaian bullet untuk menandai sebuah item dari list. Bullet
adalah karakter tertentu yang berupa karakter symbol, misalkan bullet dengan bentuk tanda panah,
rumah, segitiga, dan sebagainya.
Untuk membuat list dengan menggunakan sebuah bullet di gunakan tag <UL> (unordered list) sebagai
tanda tag awal dan </UL> sebagai tanda tag penutup. Untuk item-item di dalam list harus diawali
dengan tag <LI> dan tidak memerlukan tanda akhir tag.
Untuk lebih jelasnya Anda dapat mengetikkan contoh sebagai berikut:
<HTML>
<HEAD>
<TITLE> contoh3.htm</TITLE>
</HEAD>
<BODY>
<UL>
<LI>MS-Word
<LI>MS-Excel
<LI>MS-Access
<LI>MS-PowerPoint
</UL>
</BODY>
Bentuk default tanda item dalam tag <UL> adalah bullet. Untuk mengubah Anda dapat menggunakan
atribut TYPE dengan diikuti nilai kontanta. Konstanta ini mewakili karakter symbol yang akan
digunakan.
Sedangkan item-item dari daftar tadi ditandai dengan memberikan tag <LI> perhatikan contoh berikut:
<HTML>
<HEAD>
<TITLE>contoh4.htm</TITLE>
</HEAD>
<BODY>
<UL>
<LI> MS-Word(TYPE=square)
<LI> MS-Excel(TYPE=disk)
<LI> MS-Access(TYPE=circle)
<LI> MS-PowerPoint
</UL>
</BODY>
</HTML>
Ordered List
Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list dimulai dengan
tag <OL> dan diakhiri dengan tag </OL>. Perhatikan contoh berikut:
<HTML>
<HEAD>
<TITLE>contoh5.htm</TITLE>
</HEAD>
<BODY>
<OL TYPE=I START=3>
<LI TYPE=1>MS-Word
<LI TYPE=A>MS-Excel
<LI>MS-Access
<LI TYPE=i>MS-PowerPoint
<LI>MS-PhotoDraw
</OL>
</BODY>
</HTML>
Ordered list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu:
• 1 ⇒1,2,3….
• A ⇒A,B,C,….
• A ⇒a,b,c,….
• I ⇒I,II,III,….
• i ⇒i,ii,iii,….
Apabila Anda menuliskan atribut TYPE pada tag <OL> maka tipe tersebut akan dipakai sebagai default
dari seluruh item. Namun Anda juga dapat memberikan tipe untuk masing-masing item, yaitu dengan
memberikan atribut TYPE pada tag <LI>. Atribut START dipakai padatag <OL> dan digunakan
untuk menentukan nomor dari item pertama.
Definition List
Definition list adalah daftar yang mempunyai keterangan pada itemnya. Untuk memakai defenition list
Anda dapat menggunakan pasangan tag <DL> dan </DL>. Tag ini bekerja dibantu oleh tag lainnya,
yaitu tag <DT> yang menandakan item yang dijelaskan dan tag <DD> menyatakan defenisi dari item.
Perhatikan contoh berikut
<HTML>
<HEAD>
<TITLE>contoh6.htm</TITLE>
</HEAD>
<BODY>
<DL>
<DT>MS-PowerPoint<DD>Merupakan program pengolah kata dari Microsoft.
<DT>MS-Excel<DD>Merupakan program Spreadsheet.
<DT>MS-Access<DD>Merupakan program Database.
</DL>
</BODY>
</HTML>
Membuat Paragraf
Anda dapat mulai meletakkan informasi Anda pada halaman web. Untuk keperluan ini HTML
menyediakan tags <P>. Perintah ini mempunyai beberapa atribut.
Tag <P> umumnya untuk menandai suatu paragraf baru. Anda juga dapat menggunakan tag <BR> untuk
memulai baris baru, namun pemakaian tag <P> terutama digunakan untuk membuat group paragraf
dengan formatting style tertentu. Berikut ini adalah contoh paragraph pada HTML.
<HTML>
<HEAD>
<TITLE>contoh8.htm</TITLE>
</HEAD>
<BODY>
<P ALIGN="center">
Keberhasilan Microsoft dalam memasarkan produknya dapat diacungkan jempol,
dibuktikan dengan banyak perusahaan yang menggunakan produknya.
<P ALIGN="right">
Salah satunya adalah Microsoft Word yang menjadi standar pengolah kata di
banyak perusahaan.
<P ALIGN="left">
Microsoft Word dilengkapi dengan banyak feature untuk memudahkan penggunanya.
</P>
</BODY>
</HTML>
Sama halnya dengan tag heading, tag paragraf <P> memiliki atribut untuk mengatur alignment atau
pengatur posisi, yaitu left untuk meratakan paragrap di kiri, right untuk perataan sebelah kanan, dan
center untuk meletakkan pada posisi tengah horizontal.
Menghubungkan ke Halaman Web Lain
Untuk menghubungkan halaman web Anda dengan halaman lainnya, HTML menyediakan pasangan tag
<A>dan </A> pemakaian tag ini yang diikuti dengan atribut HREF akan memungkinkan halaman web
Anda terhubung ke halaman web lainnya seperti pada contoh berikut:
Ini adalah link ke <A HREF=http://www.yahoo.com> Your Searching Web </A>
Anda juga dapat melakukan link ke bagian lain dari halaman web caranya menandai suatu daerah
dengan memberikan atribut NAME pada tag <A>, misalkan:
<A NAME=”Tanda1”>Bagian ini akan ditandai.</A>
Kemudian untuk membuat link ke bagian tersebut, berikan kode seperti berikut:
<A HREF=”#Tanda1”>Menuju ke bagian yang ditandai.</A>
main |
sidebar
Archive
Selasa, 11 Maret 2014
Belajar HTML 1
di 04.55
Subscribe to:
Posting Komentar (Atom)
Template by:
About
Designed by SkinCorner Free Blogger Templates | Sponsored by Papercraft for Kids | Power Point Templates
0 komentar:
Posting Komentar